atomicuilibrary 0.0.1 → 0.1.3

package/dist/components/ui-file-upload.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as i,createEvent as a,h as s,Host as t,transformTag as o}from"@stencil/core/internal/client";import{d as r,a as l}from"./badge.js";import{d}from"./icon.js";const n=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.fileSelect=a(this,"fileSelect",7),this.fileRemove=a(this,"fileRemove",7),this.fileReject=a(this,"fileReject",7),this.uploadProgress=a(this,"uploadProgress",7),this.uploadSuccess=a(this,"uploadSuccess",7),this.allUploadsComplete=a(this,"allUploadsComplete",7)}disconnectedCallback(){Object.values(this.uploadIntervals).forEach((e=>clearInterval(e))),this.uploadIntervals={}}label="";helperText="";accept="";multiple=!1;maxSize=10485760;minSize=0;maxFiles=5;showPreview=!0;disabled=!1;variant="dropzone";uploadIcon="📁";rtl=!1;capture=!1;validateFileName=!0;fileNamePattern="";showValidateButton=!1;showUploadButton=!1;autoUpload=!0;autoCloseOnSuccess=!1;headerTitle="";isDragging=!1;files=[];errors=[];componentStatus="idle";uploadIntervals={};fileSelect;fileRemove;fileReject;uploadProgress;uploadSuccess;allUploadsComplete;inputRef;async removeInvalidFiles(){this.files=this.files.filter((e=>"error"!==e.status)),this.errors=[],this.fileSelect.emit(this.files)}async validate(){this.componentStatus="validating";let e=!0;const i=this.files.map((i=>"pending"!==i.status&&"validating"!==i.status?i:this.validateFile(i.file).length>0?(e=!1,{...i,status:"error"}):{...i,status:"pending"}));return this.files=[...i],await new Promise((e=>setTimeout(e,600))),this.componentStatus=e?"idle":"error",e}async upload(){if("uploading"===this.componentStatus)return;this.componentStatus="uploading";const e=this.files.filter((e=>"pending"===e.status||"error"===e.status));0!==e.length?e.forEach((e=>{this.startSimulation(e.name)})):this.componentStatus="idle"}async clear(){Object.values(this.uploadIntervals).forEach((e=>clearInterval(e))),this.uploadIntervals={},this.files=[],this.errors=[],this.componentStatus="idle"}formatSize(e){return e<1024?e+" B":e<1048576?(e/1024).toFixed(1)+" KB":(e/1048576).toFixed(1)+" MB"}getAcceptTokens(){return this.accept.split(",").map((e=>e.trim())).filter(Boolean)}matchesAcceptRule(e){const i=this.getAcceptTokens();if(0===i.length)return!0;const a=(e.type||"").toLowerCase(),s=e.name.toLowerCase();return i.some((e=>{const i=e.toLowerCase();return i.startsWith(".")?s.endsWith(i):i.endsWith("/*")?a.startsWith(i.slice(0,-1)):a===i}))}getFileNameValidationError(e){if(!this.validateFileName)return null;if(!e.trim())return{fileName:e,message:"A selected file is missing a valid name",rule:"invalid-name"};if(/[<>:"/\\|?*\u0000-\u001F]/.test(e))return{fileName:e,message:e+" contains invalid filename characters",rule:"invalid-name"};if(/[. ]$/.test(e))return{fileName:e,message:e+" cannot end with a space or period",rule:"invalid-name"};const i=e.replace(/\.[^/.]+$/,"");if(/^(con|prn|aux|nul|com[1-9]|lpt[1-9])$/i.test(i))return{fileName:e,message:e+" uses a reserved filename",rule:"reserved-name"};if(this.fileNamePattern)try{if(!RegExp(this.fileNamePattern).test(e))return{fileName:e,message:e+" does not match the required filename pattern",rule:"file-name-pattern"}}catch(e){}return null}validateFile(e){const i=[],a=this.getFileNameValidationError(e.name);return a&&i.push(a),this.minSize>0&&e.size<this.minSize&&i.push({fileName:e.name,message:`${e.name} is smaller than the minimum size (${this.formatSize(this.minSize)})`,rule:"min-size"}),e.size>this.maxSize&&i.push({fileName:e.name,message:`${e.name} exceeds max size (${this.formatSize(this.maxSize)})`,rule:"max-size"}),this.matchesAcceptRule(e)||i.push({fileName:e.name,message:e.name+" is not an accepted file type",rule:"accept"}),i}processFiles(e){const i=[],a=[],s=this.maxFiles-this.files.length;s<=0&&i.push({fileName:"",message:`You can upload up to ${this.maxFiles} files`,rule:"max-files"}),e.length>s&&s>0&&i.push({fileName:"",message:`Only ${s} more file${1===s?"":"s"} can be added`,rule:"max-files"}),Array.from(e).slice(0,s).forEach((e=>{const s=this.files.some((i=>i.name===e.name&&i.size===e.size)),t={name:e.name,size:e.size,type:e.type,file:e,status:"pending",progress:0};s&&(t.status="error",t.errorMessage=`Duplicate detected: "${e.name}"`,i.push({fileName:e.name,message:t.errorMessage,rule:"duplicate-file"})),0===e.size&&(t.status="error",t.errorMessage="File is empty (0 bytes)",i.push({fileName:e.name,message:t.errorMessage,rule:"empty-file"}));const o=this.validateFile(e);o.length>0&&"error"!==t.status&&(t.status="error",t.errorMessage=o[0].message,i.push(...o));const r=new FileReader;r.onload=e=>{t.dataUrl=e.target?.result,this.files=[...this.files]},e.type.startsWith("image/")&&r.readAsDataURL(e),a.push(t)})),this.errors=i.map((e=>e.message)),this.files=[...this.files,...a],this.autoUpload&&a.filter((e=>"pending"===e.status)).forEach((e=>this.startSimulation(e.name))),i.length>0&&this.fileReject.emit(i),this.fileSelect.emit(this.files)}handleDrop=e=>{e.preventDefault(),this.isDragging=!1,!this.disabled&&e.dataTransfer?.files&&this.processFiles(e.dataTransfer.files)};handlePaste=e=>{!this.disabled&&e.clipboardData?.files.length&&this.processFiles(e.clipboardData.files)};startSimulation(e){this.uploadIntervals[e]&&clearInterval(this.uploadIntervals[e]);const i=this.files.findIndex((i=>i.name===e));-1!==i&&(this.files[i].status="uploading",this.files=[...this.files],this.uploadIntervals[e]=setInterval((()=>{const i=this.files.findIndex((i=>i.name===e));if(-1===i)return void clearInterval(this.uploadIntervals[e]);const a=this.files[i].progress||0;if(a>=100)clearInterval(this.uploadIntervals[e]),delete this.uploadIntervals[e],this.files[i].status="success",this.files[i].progress=100,this.files=[...this.files],this.uploadSuccess.emit(this.files[i]),this.checkAllComplete();else{const s=Math.min(100,a+15*Math.random()+5);this.files[i].progress=s,this.files=[...this.files],this.uploadProgress.emit({fileName:e,progress:s})}}),400))}checkAllComplete(){this.files.every((e=>"success"===e.status||"error"===e.status))&&this.files.length>0&&(this.allUploadsComplete.emit(this.files),this.componentStatus="success",this.autoCloseOnSuccess&&setTimeout((()=>{this.clear()}),1500))}handleFileInput=e=>{const i=e.target;i.files&&this.processFiles(i.files),i.value=""};removeFile=e=>{const i=this.files[e];this.uploadIntervals[i.name]&&(clearInterval(this.uploadIntervals[i.name]),delete this.uploadIntervals[i.name]),this.files=this.files.filter(((i,a)=>a!==e)),this.fileRemove.emit(i.name),this.fileSelect.emit(this.files)};getIcon(e){return e.startsWith("image/")?"🖼️":"application/pdf"===e?"📄":e.includes("word")?"📝":e.includes("sheet")||e.includes("excel")?"📊":e.includes("zip")||e.includes("rar")?"🗜️":"📎"}render(){const e=!this.disabled&&this.files.length<this.maxFiles,i=this.files.length>0,a="uploading"===this.componentStatus,o="validating"===this.componentStatus,r=this.files.filter((e=>"error"!==e.status)).length,l=this.files.some((e=>"error"===e.status));return s(t,{key:"e023a6d860e04cbad81a073a3d921b4670644ea1",dir:this.rtl?"rtl":"ltr",onPaste:this.handlePaste,class:{"is-sideload":"sideload"===this.variant}},"sideload"===this.variant&&s("div",{key:"f0a9154a2d0fd3574b659674cf76f3a12f058d57",class:"fu-sideload-header"},s("div",{key:"83d0168bac94abaa64b8e97026c97fd8d2423ae3",class:"fu-header-title-row"},s("ui-icon",{key:"8387010b6ef439d6de023eb97eb18fc38d9aa06d",name:"upload-cloud",library:"lucide",size:"24px",color:"var(--color-primary, #10b981)"}),s("h2",{key:"a31a8e98afedd667a99090de154ee41565e7d6ca"},this.headerTitle||"Sideload Firmware"),s("ui-button",{key:"b6253491fe52f40256bc7160c5d7f127f56618f3",variant:"ghost",size:"md",iconOnly:!0,icon:"x",iconLibrary:"lucide",class:"fu-close-dialog"})),s("div",{key:"b1628a83b975aaf63a78fb4827eda5b723d7559e",class:{"fu-sideload-zone":!0,"is-dragging":this.isDragging},onDragOver:e=>{e.preventDefault(),this.isDragging=!0},onDragLeave:()=>this.isDragging=!1,onDrop:this.handleDrop,onClick:()=>e&&this.inputRef?.click()},s("ui-icon",{key:"438322e56615a49d5b59ce048a53baa70a378bbd",name:"upload",library:"lucide",size:"20px",color:"var(--color-primary, #10b981)"}),s("span",{key:"55635c6bdee2d0f6cdb76f6c631e43af00119c29"},"Drop more files or ",s("strong",{key:"38a4347b3acc9f226d8807513a13e896cc3988ab",class:"fu-browse-pill"},"Browse")))),this.label&&"sideload"!==this.variant&&s("label",{key:"8d7e1ab4892d62a638a0ac2a7ed3de49ea4db3a7",class:"fu-label"},this.label),"dropzone"===this.variant&&s("div",{key:"e3db150b83ca3874088a4f0ab4ff721d1eb8599a",class:{"fu-zone":!0,"fu-dragging":this.isDragging,"fu-disabled":this.disabled},onDragOver:e=>{e.preventDefault(),this.isDragging=!0},onDragLeave:()=>this.isDragging=!1,onDrop:this.handleDrop,onClick:()=>e&&this.inputRef?.click()},s("div",{key:"c067ae850850024015757974c5e881b1fc52cdd0",class:"fu-zone-icon"},this.uploadIcon),s("div",{key:"a438cded36e799c246e29bd636bc79c833246d2e",class:"fu-zone-title"},"Drag & drop files here"),s("div",{key:"952dd6afce21218fa9a3b9c1f7cb1a2854ab9f21",class:"fu-zone-sub"},"or ",s("span",{key:"5946db023c7713f63ff402082de612cfe27d79e1",class:"fu-zone-browse"},"browse files")),s("div",{key:"0b63680de4b4c3d99a985747efd1bdf2733b8c1a",class:"fu-zone-limit"},this.accept&&s("span",{key:"5c75daa15408bec904c57ee6f7e4af4ba09f56b7"},"Accepts: ",this.accept),s("span",{key:"34488fd0e8064650fcbc50672d9f4b40b56c3252"},"Max ",this.formatSize(this.maxSize)," · Up to ",this.maxFiles," files"))),("button"===this.variant||"compact"===this.variant)&&s("div",{key:"805a97dbff1ac3911e20d25d9feb5dc0e0254d90",class:"fu-trigger-row"},"button"===this.variant&&s("ui-button",{key:"54b3624ef218f5c5c8d62a4c5dc88fe24ddc9a27",variant:"primary",onClick:()=>e&&this.inputRef?.click(),disabled:this.disabled||a,label:this.label||"Select Files",icon:this.uploadIcon}),"compact"===this.variant&&s("div",{key:"3ebbfb44da248d985e86f48759772545de916d5d",class:{"fu-compact":!0,"fu-disabled":this.disabled},onClick:()=>e&&this.inputRef?.click()},s("span",{key:"39e88c85f57b10cec99d7c677689cd0402b8b5b0",class:"fu-compact-icon"},this.uploadIcon),s("span",{key:"41e011e8f46008ef0e803fcfe7bbecc55e7ddd98",class:"fu-compact-text"},this.label||"Choose file"),s("span",{key:"5f2c96e19c6ab3d715ffbd9d33fd49c507cda31b",class:"fu-compact-count"},this.files.length," / ",this.maxFiles)),(this.showValidateButton||this.showUploadButton)&&s("div",{key:"494128b8db00f33ab9d602b78c2c17c9374ddf0a",class:"fu-actions"},this.showValidateButton&&s("ui-button",{key:"470be75a0b9a69b8557f749c615f60848b045f7f",variant:"outline",size:"md",loading:o,disabled:a||this.disabled||!i,onClick:()=>this.validate(),label:"Validate"}),this.showUploadButton&&s("ui-button",{key:"14cea3a0039fe06e5a6eff5baf4ce1ffcee724ad",variant:"primary",size:"md",loading:a,disabled:o||this.disabled||!i,onClick:()=>this.upload(),label:"Upload All",icon:"upload",iconLibrary:"lucide"}))),"dropzone"===this.variant&&(this.showValidateButton||this.showUploadButton)&&s("div",{key:"aba1a4dc3bfffe9b2613719ce2ae876e10bd9aca",class:"fu-dropzone-actions"},s("span",{key:"f6bddf09dfb74057ee74aff7e82a38a999973e9c",class:"fu-status-text"},i?this.files.length+" file(s) selected":"No files selected"),s("div",{key:"e050caeb8ba45b9d2d0adeddf659b5a53abddf89",class:"fu-button-group"},this.showValidateButton&&s("ui-button",{key:"95b6ea727bbe7cad4a3ba6f10e1b3777393b4ca4",variant:"ghost",size:"md",loading:o,disabled:a||!i,onClick:()=>this.validate(),label:"Validate Files"}),this.showUploadButton&&s("ui-button",{key:"3d92daaa1f7d0bb85e1bf016fb53aa0f771c4510",variant:"primary",size:"md",loading:a,disabled:o||!i,onClick:()=>this.upload(),label:"Start Upload"}))),s("input",{key:"33eaf23068f5a8042b7e44ef8564f22860693395",ref:e=>this.inputRef=e,type:"file",class:"fu-input-hidden",accept:this.accept,multiple:this.multiple,capture:!0===this.capture?"environment":this.capture||void 0,onChange:this.handleFileInput}),this.errors.length>0&&"sideload"!==this.variant&&s("div",{key:"7c206fe6b3cd098262a1061e9abf88909c443fb2",class:"fu-errors"},this.errors.map((e=>s("div",{class:"fu-error"},"⚠ ",e)))),this.showPreview&&i&&s("div",{key:"36884700bc547826dfbfa32556a59e56ea0c9ff1",class:{"fu-file-list":!0,"is-sideload-list":"sideload"===this.variant}},"sideload"!==this.variant&&s("div",{key:"634011f23cba7105437851f7e969e98ee1e46c09",class:"fu-list-header"},"QUEUED FILES"),this.files.map(((e,i)=>{const t=e.progress||0,o=e.status,r="error"===o?"alert-triangle":"success"===o?"check-circle":"info",l="error"===o?"#f59e0b":"success"===o?"#10b981":"#3b82f6";return s("div",{class:{"fu-file-item":!0,["is-"+o]:!0},key:e.name+i},"sideload"===this.variant?s("ui-icon",{class:"fu-sideload-item-icon",name:r,library:"lucide",size:"24px",color:l}):e.type.startsWith("image/")&&e.dataUrl?s("img",{class:"fu-thumb",src:e.dataUrl,alt:e.name}):s("span",{class:"fu-file-icon"},this.getIcon(e.type)),s("div",{class:"fu-file-info"},s("div",{class:"fu-file-name-row"},s("span",{class:"fu-file-name"},e.name),s("span",{class:"fu-file-status"},"sideload"!==this.variant&&s("span",{class:"fu-status-label"},{pending:"Ready",validating:"Validating...",uploading:"Uploading...",success:"Complete",error:"Failed"}[o]),"success"===o&&s("ui-icon",{name:"check",library:"lucide",size:"14px",color:"#10b981"}),"error"===o&&"sideload"!==this.variant&&s("ui-icon",{name:"alert-circle",library:"lucide",size:"14px",color:"#ef4444"}),"uploading"===o&&s("span",{class:"fu-file-percent"},Math.round(t),"%"))),s("div",{class:"fu-file-meta"},s("span",{class:"fu-file-size"},this.formatSize(e.size)),e.errorMessage&&s("span",{class:"fu-item-error-msg"}," · ",e.errorMessage)),("uploading"===o||"success"===o)&&s("div",{class:"fu-progress-bar"},s("div",{class:"fu-progress-fill",style:{width:t+"%"}}))),s("ui-button",{variant:"ghost",size:"xxs",iconOnly:!0,class:"fu-remove",onClick:e=>{e.stopPropagation(),this.removeFile(i)},ariaLabel:"Remove",icon:"x-circle",iconLibrary:"lucide",iconSize:"18px",disabled:a&&"uploading"===o}))}))),"sideload"===this.variant&&s("div",{key:"ef71906dbefd987da6f7cf54dacb41528d8e7d4b",class:"fu-sideload-footer"},s("div",{key:"e5ce897412814293206de68572bce9fe93478fff",class:"fu-footer-actions-left"},l&&s("ui-button",{key:"40c336eb57ba23767800511d7f8a5525c3bb3a0f",variant:"ghost",size:"md",label:"Clean Queue",onClick:()=>this.removeInvalidFiles(),icon:"trash-2",iconLibrary:"lucide"})),s("div",{key:"31c7983a14455d24158aa3c7bb69b490f995968e",class:"fu-footer-actions-right"},s("ui-button",{key:"d9723f7193044a178473437cad30d2074d41b6b4",variant:"outline",label:"Cancel",onClick:()=>this.clear()}),s("ui-button",{key:"532aae5a83893629ee5d8186904286393183f5e7",variant:"primary",label:`Upload ${r} files`,disabled:0===r||a,loading:a,onClick:()=>this.upload(),icon:"upload",iconLibrary:"lucide"}))),this.helperText&&"sideload"!==this.variant&&s("div",{key:"6bd4941a135fbf542f3d9ca275847660424695d9",class:"fu-helper"},this.helperText))}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;font-family:inherit}:host(.is-sideload){background:white;border-radius:24px;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.12);border:1px solid #e5e7eb}.fu-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary, #374151);margin-bottom:6px}.fu-sideload-header{padding:32px 32px 16px 32px}.fu-header-title-row{display:flex;align-items:center;gap:16px;margin-bottom:24px}.fu-header-title-row h2{margin:0;font-size:28px;font-weight:500;color:#111827;flex:1}.fu-close-dialog{background:#ef4444 !important;color:white !important;border-radius:8px !important;width:36px;height:36px}.fu-sideload-zone{border:2px dashed #e5e7eb;border-radius:12px;padding:16px;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;background:#fdfdfd;transition:all 0.2s}.fu-sideload-zone:hover,.fu-sideload-zone.is-dragging{border-color:#10b981;background:#f0fdf4}.fu-sideload-zone span{font-size:15px;color:#4b5563}.fu-browse-pill{background:#10b981;color:white;padding:2px 12px;border-radius:20px;font-weight:600;margin-left:4px}.fu-zone{border:2px dashed var(--border-strong, #d1d5db);border-radius:14px;padding:40px 24px;text-align:center;cursor:pointer;background:var(--bg-primary, #fafafa);transition:border-color 0.2s, background 0.2s}.fu-zone:hover:not(.fu-disabled){border-color:var(--color-primary, #10b981);background:var(--bg-primary, #eff6ff)}.fu-zone.fu-dragging{border-color:var(--color-primary, #10b981);background:var(--bg-primary, #eff6ff);box-shadow:inset 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.fu-zone.fu-disabled{opacity:0.5;cursor:not-allowed}.fu-zone-icon{font-size:40px;margin-bottom:10px}.fu-file-list{display:flex;flex-direction:column;gap:12px;padding:16px 32px;max-height:400px;overflow-y:auto}.fu-file-list.is-sideload-list{padding:0 32px 32px 32px}.fu-file-item{display:flex;align-items:center;gap:16px;padding:14px 20px;border:1px solid #e5e7eb;border-radius:14px;background:white;transition:transform 0.2s}.fu-file-item.is-error{background:#fff1f2;border-color:#fecaca}.fu-sideload-item-icon{flex-shrink:0}.fu-file-info{flex:1;min-width:0}.fu-file-name{display:block;font-size:15px;font-weight:600;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fu-file-meta{font-size:13px;color:#6b7280;margin-top:2px}.fu-item-error-msg{color:#ef4444;font-weight:700;background:rgba(239, 68, 68, 0.08);padding:1px 6px;border-radius:4px}.fu-remove{color:#9ca3af !important}.fu-remove:hover{color:#ef4444 !important}.fu-sideload-footer{padding:24px 32px;background:#f9fafb;border-top:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between}.fu-footer-actions-right{display:flex;gap:12px}.fu-trigger-row{display:flex;align-items:center;gap:16px}.fu-actions{display:flex;gap:8px}.fu-progress-bar{height:6px;background:#e5e7eb;border-radius:3px;margin-top:10px;overflow:hidden}.fu-progress-fill{height:100%;background:#10b981;transition:width 0.3s ease}.fu-input-hidden{display:none}"}},[513,"ui-file-upload",{label:[1],helperText:[1,"helper-text"],accept:[1],multiple:[4],maxSize:[2,"max-size"],minSize:[2,"min-size"],maxFiles:[2,"max-files"],showPreview:[4,"show-preview"],disabled:[4],variant:[1],uploadIcon:[1,"upload-icon"],rtl:[4],capture:[8],validateFileName:[4,"validate-file-name"],fileNamePattern:[1,"file-name-pattern"],showValidateButton:[4,"show-validate-button"],showUploadButton:[4,"show-upload-button"],autoUpload:[4,"auto-upload"],autoCloseOnSuccess:[4,"auto-close-on-success"],headerTitle:[1,"header-title"],isDragging:[32],files:[32],errors:[32],componentStatus:[32],removeInvalidFiles:[64],validate:[64],upload:[64],clear:[64]}]),c=n,f=function(){"undefined"!=typeof customElements&&["ui-file-upload","ui-badge","ui-button","ui-icon"].forEach((e=>{switch(e){case"ui-file-upload":customElements.get(o(e))||customElements.define(o(e),n);break;case"ui-badge":customElements.get(o(e))||l();break;case"ui-button":customElements.get(o(e))||r();break;case"ui-icon":customElements.get(o(e))||d()}}))};export{c as UiFileUpload,f as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as a,createEvent as t,h as o,Host as r,transformTag as i}from"@stencil/core/internal/client";import{d as s}from"./badge.js";import{d}from"./button.js";import{d as l}from"./icon.js";import{d as n}from"./loader.js";const u=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.fileSelect=t(this,"fileSelect",7),this.fileRemove=t(this,"fileRemove",7),this.fileReject=t(this,"fileReject",7),this.uploadProgress=t(this,"uploadProgress",7),this.uploadSuccess=t(this,"uploadSuccess",7),this.allUploadsComplete=t(this,"allUploadsComplete",7)}disconnectedCallback(){Object.values(this.uploadIntervals).forEach((e=>clearInterval(e))),this.uploadIntervals={}}label="";helperText="";accept="";multiple=!1;maxSize=10485760;minSize=0;maxFiles=5;showPreview=!0;disabled=!1;variant="dropzone";uploadIcon="";rtl=!1;capture=!1;validateFileName=!0;fileNamePattern="";showValidateButton=!1;showUploadButton=!1;autoUpload=!0;autoCloseOnSuccess=!1;directory=!1;headerTitle="";isDragging=!1;files=[];errors=[];componentStatus="idle";isQueueOpen=!1;previewFileIndex=-1;uploadIntervals={};fileSelect;fileRemove;fileReject;uploadProgress;uploadSuccess;allUploadsComplete;inputRef;async removeInvalidFiles(){this.files=this.files.filter((e=>"error"!==e.status)),this.errors=[],this.fileSelect.emit(this.files)}async validate(){this.componentStatus="validating";let e=!0;const a=this.files.map((a=>"pending"!==a.status&&"validating"!==a.status?a:this.validateFile(a.file).length>0?(e=!1,{...a,status:"error"}):{...a,status:"pending"}));return this.files=[...a],await new Promise((e=>setTimeout(e,600))),this.componentStatus=e?"idle":"error",e}async upload(){if("uploading"===this.componentStatus)return;this.componentStatus="uploading";const e=this.files.filter((e=>"pending"===e.status||"error"===e.status));0!==e.length?e.forEach((e=>{this.startSimulation(e.name)})):this.componentStatus="idle"}async clear(){Object.values(this.uploadIntervals).forEach((e=>clearInterval(e))),this.uploadIntervals={},this.files=[],this.errors=[],this.componentStatus="idle",this.isQueueOpen=!1,this.previewFileIndex=-1}formatSize(e){return e<1024?e+" B":e<1048576?(e/1024).toFixed(1)+" KB":(e/1048576).toFixed(1)+" MB"}getAcceptTokens(){return this.accept.split(",").map((e=>e.trim())).filter(Boolean)}matchesAcceptRule(e){const a=this.getAcceptTokens();if(0===a.length)return!0;const t=(e.type||"").toLowerCase(),o=e.name.toLowerCase();return a.some((e=>{const a=e.toLowerCase();return a.startsWith(".")?o.endsWith(a):a.endsWith("/*")?t.startsWith(a.slice(0,-1)):t===a}))}getFileNameValidationError(e){if(!this.validateFileName)return null;if(!e.trim())return{fileName:e,message:"A selected file is missing a valid name",rule:"invalid-name"};if(/[<>:"/\\|?*\u0000-\u001F]/.test(e))return{fileName:e,message:e+" contains invalid filename characters",rule:"invalid-name"};if(/[. ]$/.test(e))return{fileName:e,message:e+" cannot end with a space or period",rule:"invalid-name"};const a=e.replace(/\.[^/.]+$/,"");if(/^(con|prn|aux|nul|com[1-9]|lpt[1-9])$/i.test(a))return{fileName:e,message:e+" uses a reserved filename",rule:"reserved-name"};if(this.fileNamePattern)try{if(!RegExp(this.fileNamePattern).test(e))return{fileName:e,message:e+" does not match the required filename pattern",rule:"file-name-pattern"}}catch(e){}return null}validateFile(e){const a=[],t=this.getFileNameValidationError(e.name);return t&&a.push(t),0===e.size?(a.push({fileName:e.name,message:e.name+" is empty (0 KB) and cannot be uploaded",rule:"empty-file"}),a):(this.minSize>0&&e.size<this.minSize&&a.push({fileName:e.name,message:`${e.name} is smaller than the minimum size (${this.formatSize(this.minSize)})`,rule:"min-size"}),e.size>this.maxSize&&a.push({fileName:e.name,message:`${e.name} exceeds max size (${this.formatSize(this.maxSize)})`,rule:"max-size"}),this.matchesAcceptRule(e)||a.push({fileName:e.name,message:e.name+" is not an accepted file type",rule:"accept"}),a)}processFiles(e){const a=[],t=[],o=this.maxFiles-this.files.length;o<=0&&a.push({fileName:"",message:`You can upload up to ${this.maxFiles} files`,rule:"max-files"}),e.length>o&&o>0&&a.push({fileName:"",message:`Only ${o} more file${1===o?"":"s"} can be added`,rule:"max-files"}),Array.from(e).slice(0,o).forEach((e=>{const o=this.files.some((a=>a.name===e.name&&a.size===e.size)),r={name:e.name,size:e.size,type:e.type,file:e,status:"pending",progress:0};o&&(r.status="error",r.errorMessage=`Duplicate detected: "${e.name}"`,a.push({fileName:e.name,message:r.errorMessage,rule:"duplicate-file"}));const i=this.validateFile(e);i.length>0&&"error"!==r.status&&(r.status="error",r.errorMessage=i[0].message,a.push(...i));const s=new FileReader;s.onload=e=>{r.dataUrl=e.target?.result,this.files=[...this.files]},e.type.startsWith("image/")&&s.readAsDataURL(e),t.push(r)})),this.errors=a.map((e=>e.message)),this.files=[...this.files,...t],t.length>0&&"sideload"!==this.variant&&(this.isQueueOpen=!0),this.autoUpload&&t.filter((e=>"pending"===e.status)).forEach((e=>this.startSimulation(e.name))),a.length>0&&this.fileReject.emit(a),this.fileSelect.emit(this.files)}handleDrop=e=>{e.preventDefault(),this.isDragging=!1,!this.disabled&&e.dataTransfer?.files&&this.processFiles(e.dataTransfer.files)};handlePaste=e=>{!this.disabled&&e.clipboardData?.files.length&&this.processFiles(e.clipboardData.files)};startSimulation(e){this.uploadIntervals[e]&&clearInterval(this.uploadIntervals[e]);const a=this.files.findIndex((a=>a.name===e));-1!==a&&(this.files[a].status="uploading",this.files=[...this.files],this.uploadIntervals[e]=setInterval((()=>{const a=this.files.findIndex((a=>a.name===e));if(-1===a)return void clearInterval(this.uploadIntervals[e]);const t=this.files[a].progress||0;if(t>=100)clearInterval(this.uploadIntervals[e]),delete this.uploadIntervals[e],this.files[a].status="success",this.files[a].progress=100,this.files=[...this.files],this.uploadSuccess.emit(this.files[a]),this.checkAllComplete();else{const o=Math.min(100,t+15*Math.random()+5);this.files[a].progress=o,this.files=[...this.files],this.uploadProgress.emit({fileName:e,progress:o})}}),400))}checkAllComplete(){this.files.every((e=>"success"===e.status||"error"===e.status))&&this.files.length>0&&(this.allUploadsComplete.emit(this.files),this.componentStatus="success",this.autoCloseOnSuccess&&setTimeout((()=>{this.clear()}),1500))}handleFileInput=e=>{const a=e.target;a.files&&this.processFiles(a.files),a.value=""};removeFile=e=>{const a=this.files[e];this.uploadIntervals[a.name]&&(clearInterval(this.uploadIntervals[a.name]),delete this.uploadIntervals[a.name]),this.files=this.files.filter(((a,t)=>t!==e)),this.errors=this.errors.filter((e=>!e.includes(a.name))),this.files.length<this.maxFiles&&(this.errors=this.errors.filter((e=>!e.includes("more file")&&!e.includes("upload up to")))),0===this.files.length&&(this.errors=[]),this.fileRemove.emit(a.name),this.fileSelect.emit(this.files)};getFileIconStyles(e){const a=(e||"").toLowerCase();return a.startsWith("image/")?{icon:"image",bg:"rgba(168, 85, 247, 0.08)",color:"rgb(168, 85, 247)"}:"application/pdf"===a||a.includes("pdf")||a.includes("word")||a.includes("document")?{icon:"file-text",bg:"rgba(59, 130, 246, 0.08)",color:"rgb(59, 130, 246)"}:a.includes("sheet")||a.includes("excel")||a.includes("csv")||a.includes("spreadsheet")?{icon:"file-spreadsheet",bg:"rgba(16, 185, 129, 0.08)",color:"rgb(16, 185, 129)"}:a.includes("zip")||a.includes("rar")||a.includes("tar")||a.includes("compressed")||a.includes("7z")?{icon:"archive",bg:"rgba(245, 158, 11, 0.08)",color:"rgb(245, 158, 11)"}:a.startsWith("audio/")?{icon:"music",bg:"rgba(236, 72, 153, 0.08)",color:"rgb(236, 72, 153)"}:a.startsWith("video/")?{icon:"video",bg:"rgba(239, 68, 68, 0.08)",color:"rgb(239, 68, 68)"}:{icon:"file",bg:"rgba(107, 114, 128, 0.08)",color:"rgb(107, 114, 128)"}}renderUploadZoneIcon(e="40px"){return this.uploadIcon?/^[a-z0-9-]+$/.test(this.uploadIcon)?o("ui-icon",{name:this.uploadIcon,library:"lucide",size:e,color:"var(--color-primary, #10b981)"}):o("span",{class:"fu-upload-icon-text"},this.uploadIcon):o("ui-icon",{name:"upload-cloud",library:"lucide",size:e,color:"var(--color-primary, #10b981)"})}renderFileRow(e,a,t){const r=e.progress||0,i=e.status,{icon:s,bg:d,color:l}=this.getFileIconStyles(e.type),n="error"===i?"alert-triangle":s,u="error"===i?"rgba(239, 68, 68, 0.08)":d,c="error"===i?"rgb(239, 68, 68)":l;return o("div",{class:{"fu-file-item":!0,["is-"+i]:!0,"is-clickable":!0},key:e.name+a,onClick:()=>{this.previewFileIndex=a},title:"Click to preview"},o("div",{class:"fu-file-icon-wrapper",style:{backgroundColor:u}},o("ui-icon",{name:n,library:"lucide",size:"20px",color:c})),o("div",{class:"fu-file-info"},o("div",{class:"fu-file-name-row"},o("span",{class:"fu-file-name",title:e.name},e.name),o("span",{class:"fu-file-status"},"success"===i&&o("span",{class:"fu-status-badge is-success"},o("ui-icon",{name:"check",library:"lucide",size:"12px",color:"#10b981"}),o("span",null,"Done")),"uploading"===i&&o("span",{class:"fu-status-badge is-uploading"},o("span",{class:"fu-spinner-dot"}),o("span",null,Math.round(r),"%")),"pending"===i&&o("span",{class:"fu-status-badge is-pending"},o("span",null,"Ready")),"validating"===i&&o("span",{class:"fu-status-badge is-validating"},o("span",null,"Validating…")),"error"===i&&o("span",{class:"fu-status-badge is-error"},o("span",null,"Failed")))),o("div",{class:"fu-file-meta"},o("span",{class:"fu-file-size"},this.formatSize(e.size)),"error"===i&&e.errorMessage&&o("span",{class:"fu-file-error-msg"},o("ui-icon",{name:"alert-circle",library:"lucide",size:"12px",color:"currentColor"}),o("span",null,e.errorMessage))),"uploading"===i&&o("div",{class:"fu-progress-bar"},o("div",{class:"fu-progress-fill",style:{width:r+"%"}}))),o("ui-button",{variant:"ghost",size:"xxs",iconOnly:!0,class:"fu-remove",onClick:e=>{e.stopPropagation(),this.removeFile(a)},ariaLabel:"Remove",icon:"x",iconLibrary:"lucide",iconSize:"16px",disabled:t&&"uploading"===i}))}renderQueueDialog(){if(!this.isQueueOpen||"sideload"===this.variant)return null;const e=this.files.length>0,a="uploading"===this.componentStatus,t="validating"===this.componentStatus,r=this.files.filter((e=>"error"!==e.status)).length,i=this.files.filter((e=>"pending"===e.status)).length,s=this.files.filter((e=>"success"===e.status)).length,d=this.files.filter((e=>"pending"===e.status||"uploading"===e.status)).length,l=this.files.filter((e=>"error"===e.status)).length,n=l>0,u=e&&this.files.every((e=>"success"===e.status)),c=!this.disabled&&this.files.length<this.maxFiles,f=!this.autoUpload||this.showUploadButton,h=f&&!u,b=()=>{this.isQueueOpen=!1,this.files=this.files.filter((e=>"success"!==e.status)),0===this.files.length&&(this.componentStatus="idle",this.errors=[],this.previewFileIndex=-1)};return o("div",{class:"fu-queue-backdrop",onClick:b},o("div",{class:{"fu-queue-dialog":!0,"fu-queue-dialog--manual":f},onClick:e=>e.stopPropagation(),role:"dialog","aria-modal":"true","aria-label":"Upload Queue"},o("div",{class:"fu-queue-header"},o("div",{class:"fu-queue-title"},o("ui-icon",{name:"upload-cloud",library:"lucide",size:"18px",color:"var(--color-primary, #10b981)"}),o("span",null,"Upload Queue"),o("span",{class:"fu-queue-count-pill"},this.files.length," file",1!==this.files.length?"s":"")),o("div",{class:"fu-queue-header-right"},o("span",{class:"fu-upload-mode-badge "+(f?"is-manual":"is-auto")},o("ui-icon",{name:f?"hand":"zap",library:"lucide",size:"11px",color:"currentColor"}),f?"Manual upload":"Auto upload"),o("ui-button",{variant:"ghost",size:"sm",iconOnly:!0,icon:"x",iconLibrary:"lucide",onClick:b,ariaLabel:"Close dialog"}))),f&&i>0&&!a&&!u&&o("div",{class:"fu-queue-manual-banner"},o("ui-icon",{name:"mouse-pointer-click",library:"lucide",size:"14px",color:"#6366f1"}),o("span",null,i," file",1!==i?"s":""," ready — click ",o("strong",null,"Upload")," when ready.")),this.errors.length>0&&o("div",{class:"fu-queue-errors"},this.errors.map((e=>o("div",{class:"fu-queue-error-item"},o("ui-icon",{name:"alert-triangle",library:"lucide",size:"14px",color:"#ef4444"}),o("span",null,e))))),e&&o("div",{class:"fu-queue-summary"},s>0&&o("span",{class:"fu-queue-summary-stat"},o("span",{class:"fu-qs-dot success"}),s," done"),d>0&&o("span",{class:"fu-queue-summary-stat"},o("span",{class:"fu-qs-dot pending"}),d," pending"),n&&o("span",{class:"fu-queue-summary-stat"},o("span",{class:"fu-qs-dot error"}),l," failed"),this.autoUpload&&a&&o("span",{class:"fu-queue-summary-stat is-auto"},o("span",{class:"fu-spinner-dot"})," Uploading..."),u&&o("span",{class:"fu-queue-summary-stat is-complete"},o("ui-icon",{name:"check-circle",library:"lucide",size:"13px",color:"#10b981"})," All done")),o("div",{class:"fu-queue-list"},!e&&o("div",{class:"fu-queue-empty"},o("ui-icon",{name:"inbox",library:"lucide",size:"32px",color:"var(--text-muted, #9ca3af)"}),o("span",null,"No files in queue")),this.files.map(((e,t)=>this.renderFileRow(e,t,a)))),o("div",{class:"fu-queue-footer"},o("div",{class:"fu-queue-footer-left"},c&&o("ui-button",{variant:"ghost",size:"sm",label:"Add more",icon:"plus",iconLibrary:"lucide",disabled:a,onClick:()=>this.inputRef?.click()}),n&&o("ui-button",{variant:"ghost",size:"sm",label:"Remove failed",icon:"trash-2",iconLibrary:"lucide",onClick:()=>this.removeInvalidFiles()})),o("div",{class:"fu-queue-footer-right"},!a&&!u&&o("ui-button",{variant:"outline",size:"sm",label:"Cancel all",onClick:()=>this.clear()}),this.showValidateButton&&o("ui-button",{variant:"outline",size:"sm",label:"Validate",loading:t,disabled:a||!e,onClick:()=>this.validate()}),h&&o("ui-button",{variant:"primary",size:"sm",label:a?"Uploading...":`Upload ${i>0?i:r} file${1!==(i||r)?"s":""}`,icon:a?"loader":"upload",iconLibrary:"lucide",loading:a,disabled:t||0===r,onClick:()=>this.upload()}),u&&o("ui-button",{variant:"primary",size:"sm",icon:"check",iconLibrary:"lucide",label:"Done",onClick:b})))))}renderPreviewDialog(){const e=this.previewFileIndex;if(e<0||e>=this.files.length)return null;const a=this.files[e],t=a.progress||0,r=a.status,i="uploading"===r,s=a.type?.startsWith("image/")&&!!a.dataUrl,{icon:d,bg:l,color:n}=this.getFileIconStyles(a.type),u="error"===r?"alert-triangle":d,c="error"===r?"rgba(239, 68, 68, 0.08)":l,f="error"===r?"rgb(239, 68, 68)":n,h=()=>{this.previewFileIndex=-1};return o("div",{class:"fu-dialog-backdrop",onClick:h},o("div",{class:"fu-dialog",onClick:e=>e.stopPropagation(),role:"dialog","aria-modal":"true","aria-label":"File details: "+a.name},o("div",{class:"fu-dialog-header"},o("div",{class:"fu-dialog-title"},o("ui-icon",{name:"file-search",library:"lucide",size:"18px",color:"var(--color-primary, #10b981)"}),o("span",null,"File Details")),o("ui-button",{variant:"ghost",size:"sm",iconOnly:!0,icon:"x",iconLibrary:"lucide",onClick:h,ariaLabel:"Close"})),o("div",{class:"fu-dialog-preview"},s?o("img",{class:"fu-dialog-image",src:a.dataUrl,alt:a.name}):o("div",{class:"fu-dialog-file-icon",style:{backgroundColor:c}},o("ui-icon",{name:u,library:"lucide",size:"48px",color:f}))),o("div",{class:"fu-dialog-info"},o("div",{class:"fu-dialog-name",title:a.name},a.name),o("div",{class:"fu-dialog-meta"},o("span",{class:"fu-dialog-meta-item"},o("ui-icon",{name:"hard-drive",library:"lucide",size:"13px",color:"currentColor"}),this.formatSize(a.size)),o("span",{class:"fu-dialog-meta-item"},o("ui-icon",{name:"tag",library:"lucide",size:"13px",color:"currentColor"}),a.type||"Unknown type")),o("div",{class:"fu-dialog-status-row"},"success"===r&&o("span",{class:"fu-dialog-badge is-success"},o("ui-icon",{name:"check-circle",library:"lucide",size:"14px",color:"currentColor"}),"Uploaded successfully"),"uploading"===r&&o("span",{class:"fu-dialog-badge is-uploading"},o("span",{class:"fu-spinner-dot"}),"Uploading… ",Math.round(t),"%"),"pending"===r&&o("span",{class:"fu-dialog-badge is-pending"},o("ui-icon",{name:"clock",library:"lucide",size:"14px",color:"currentColor"}),"Ready to upload"),"error"===r&&o("span",{class:"fu-dialog-badge is-error"},o("ui-icon",{name:"alert-circle",library:"lucide",size:"14px",color:"currentColor"}),a.errorMessage||"Upload failed"),"validating"===r&&o("span",{class:"fu-dialog-badge is-validating"},o("span",{class:"fu-spinner-dot"}),"Validating…")),("uploading"===r||"success"===r)&&o("div",{class:"fu-dialog-progress"},o("div",{class:"fu-dialog-progress-fill",style:{width:t+"%"}}))),o("div",{class:"fu-dialog-footer"},o("ui-button",{variant:"ghost",size:"sm",label:"Remove file",icon:"trash-2",iconLibrary:"lucide",disabled:i,onClick:()=>{this.removeFile(e),h()}}),o("div",{style:{flex:"1"}}),o("ui-button",{variant:"ghost",size:"sm",iconOnly:!0,icon:"chevron-left",iconLibrary:"lucide",disabled:0===e,ariaLabel:"Previous file",onClick:()=>{this.previewFileIndex=e-1}}),o("span",{class:"fu-dialog-nav-count"},e+1," / ",this.files.length),o("ui-button",{variant:"ghost",size:"sm",iconOnly:!0,icon:"chevron-right",iconLibrary:"lucide",disabled:e===this.files.length-1,ariaLabel:"Next file",onClick:()=>{this.previewFileIndex=e+1}}),o("ui-button",{variant:"primary",size:"sm",label:"Close",onClick:h}))))}render(){const e=!this.disabled&&this.files.length<this.maxFiles,a=this.files.length>0,t="uploading"===this.componentStatus,i=this.files.filter((e=>"error"!==e.status)).length;return o(r,{key:"d3152c915742132400c8c4bb67d9e3b89d54b632",dir:this.rtl?"rtl":"ltr",onPaste:this.handlePaste,class:{"is-sideload":"sideload"===this.variant}},"sideload"===this.variant&&o("div",{key:"dd3fe148a8860b4b9b1ef9e47358bdd46dd64a21",class:"fu-sideload-header"},o("div",{key:"0f170379a0ea0c797a6c05819af167de7c2dafed",class:"fu-header-title-row"},o("ui-icon",{key:"6b0b71f7e01651f33efaf6a2a3421367b71b47cc",name:"upload-cloud",library:"lucide",size:"24px",color:"var(--color-primary, #10b981)"}),o("h2",{key:"a4330e9cb9973cdb61ed42f65dc5a374c371d8f2"},this.headerTitle||"Sideload Firmware"),o("ui-button",{key:"2dd90814fbaa9f636c1a0f24f126ab9b31583d66",variant:"ghost",size:"md",iconOnly:!0,icon:"x",iconLibrary:"lucide",class:"fu-close-dialog"})),o("div",{key:"234c9679585087721a30df197ae8c0f3739b5c94",class:{"fu-sideload-zone":!0,"is-dragging":this.isDragging},onDragOver:e=>{e.preventDefault(),this.isDragging=!0},onDragLeave:()=>this.isDragging=!1,onDrop:this.handleDrop,onClick:()=>e&&this.inputRef?.click()},o("ui-icon",{key:"303cf7a91a182a42aa288519ba933854ffe63b94",name:"upload",library:"lucide",size:"20px",color:"var(--color-primary, #10b981)"}),o("span",{key:"d3c193b6e528ff43ce0f4ebd7959cfb0ae78b220"},"Drop more files or ",o("strong",{key:"373cba75237e24b8b6a4e384129cf9543d5cf30e",class:"fu-browse-pill"},"Browse")))),"sideload"===this.variant&&a&&o("div",{key:"e6b1e6370a769387ec8b75954e34847f93e37e05",class:"fu-file-list is-sideload-list"},this.files.map(((e,a)=>this.renderFileRow(e,a,t)))),"sideload"===this.variant&&o("div",{key:"f4d122874935aeff0dfee060c91d6299234cee5e",class:"fu-sideload-footer"},o("div",{key:"4e98b7d2bf5fa02766414def762e070d378eb98e",class:"fu-footer-actions-left"},this.files.some((e=>"error"===e.status))&&o("ui-button",{key:"a2cf99cb5992794930f97f559918a1ad02d05288",variant:"ghost",size:"md",label:"Clean Queue",icon:"trash-2",iconLibrary:"lucide",onClick:()=>this.removeInvalidFiles()})),o("div",{key:"5425b0d9c59a85e6113ab43ca1c03757bc78845b",class:"fu-footer-actions-right"},o("ui-button",{key:"c0ef12d4bd32b4eede664130f1cc662abbf1e83f",variant:"outline",label:"Cancel",onClick:()=>this.clear()}),o("ui-button",{key:"293aac09dfda74ea69b8d8ea1082ad25786ca62f",variant:"primary",label:`Upload ${i} files`,disabled:0===i||t,loading:t,onClick:()=>this.upload(),icon:"upload",iconLibrary:"lucide"}))),"sideload"!==this.variant&&o("div",{key:"ad83c062093c5992ca2f02e1b5bd11483e43f1fd"},this.label&&o("label",{key:"9b807a8af85d1fc282375a47d565b1a52d31e207",class:"fu-label"},this.label),"dropzone"===this.variant&&o("div",{key:"376d617761e2d03b3fbed7a0fa27da05a6acd1f7",class:{"fu-zone":!0,"fu-dragging":this.isDragging,"fu-disabled":this.disabled,"fu-zone-has-files":a},onDragOver:e=>{e.preventDefault(),this.isDragging=!0},onDragLeave:()=>this.isDragging=!1,onDrop:this.handleDrop,onClick:()=>e&&this.inputRef?.click()},o("div",{key:"7df435796b000ddc2af9590115ecd96d8c365bcc",class:"fu-zone-icon"},this.renderUploadZoneIcon("40px")),o("div",{key:"9cd1d88570d13b1535286a5133aa673eb56473d8",class:"fu-zone-title"},"Drag & drop files here"),o("div",{key:"82adc9f84981437ed9d1f619ad9f5b52be0a645b",class:"fu-zone-sub"},"or ",o("span",{key:"0f1f65b55b58aca3eec0d8b3667c9ebeffdc29d3",class:"fu-zone-browse"},"browse files")),o("div",{key:"b9a9021442ec5bc8e3309a51cadd2af5cb193c08",class:"fu-zone-limit"},this.accept&&o("span",{key:"12217ab2c6ce5955f966ab627740aabf114484c8"},"Accepts: ",this.accept),o("span",{key:"5ffd8530aed30321eff0c8e01c6104e2626e0476"},"Max ",this.formatSize(this.maxSize)," · Up to ",this.maxFiles," files")),a&&o("div",{key:"4d155a2c4b6516743b7ee38d2ddcc5c20d3c1089",class:"fu-zone-queue-badge",onClick:e=>{e.stopPropagation(),this.isQueueOpen=!0}},o("ui-icon",{key:"4e9d11d3444c799a6c54efbe8c3ef894be451809",name:"layers",library:"lucide",size:"14px",color:"#10b981"}),o("span",{key:"8e52407087416f63933efb6288be0e8899f06391"},this.files.length," file",1!==this.files.length?"s":""," queued"),o("span",{key:"374fbd52cbe323bea13a0749af95050030891dc4",class:"fu-zone-queue-view"},"View Queue →"))),("button"===this.variant||"compact"===this.variant||"inline"===this.variant)&&o("div",{key:"c7b031b7b628d8972fd72ab903e5324f7946fc8c",class:"fu-trigger-row"},"button"===this.variant&&o("ui-button",{key:"25a4cdca35f3c1047683825991c36335fbc0166d",variant:"primary",onClick:()=>e&&this.inputRef?.click(),disabled:this.disabled||t,label:this.label||"Select Files",icon:this.uploadIcon||"upload-cloud",iconLibrary:"lucide"}),"compact"===this.variant&&o("div",{key:"9eb1ef83a2814e814730e42c175b612cdc4f2cd8",class:{"fu-compact":!0,"fu-disabled":this.disabled},onClick:()=>e&&this.inputRef?.click()},o("span",{key:"a68573fcfc5a820a46c9b8c832ffd4ceec155651",class:"fu-compact-icon"},this.renderUploadZoneIcon("18px")),o("span",{key:"5f8c2a40cbceb3f6f10bbb4481284836e476975e",class:"fu-compact-text"},this.label||"Choose file"),o("span",{key:"ae53043e7f6dbc27bc42bde8e2bf9d7870591718",class:"fu-compact-count"},this.files.length," / ",this.maxFiles)),"inline"===this.variant&&o("button",{key:"49e94c27db6aa2b0a9eb56150abed00769a45ba2",class:{"fu-inline-trigger":!0,"fu-inline-disabled":this.disabled,"fu-inline-active":a},disabled:this.disabled,onClick:()=>e&&this.inputRef?.click(),type:"button",title:this.label||"Upload files"},o("span",{key:"148d06eb63c8df50ba268c5165fd12fb525c238e",class:"fu-inline-icon"},this.renderUploadZoneIcon("16px")),o("span",{key:"ba271f05d6d8e0b3c9419bc1e7bd367e0f7adf0d",class:"fu-inline-label"},this.label||"Upload files"),a&&o("span",{key:"d7ad2159e8e33facc99edc0926d46939c2864fb4",class:"fu-inline-badge",onClick:e=>{e.stopPropagation(),this.isQueueOpen=!0}},this.files.length)),a&&"inline"!==this.variant&&o("button",{key:"bd4a50a142bac3d136c0de7221ce15fe078628fd",class:"fu-view-queue-btn",onClick:()=>{this.isQueueOpen=!0}},o("ui-icon",{key:"71083c82786b219595cf9d8b5738848da048c0b9",name:"layers",library:"lucide",size:"14px",color:"currentColor"}),this.files.length," file",1!==this.files.length?"s":""," queued")),this.helperText&&o("div",{key:"ecc66b684f1e28a0f886faeee45b274b613f36a5",class:"fu-helper"},this.helperText)),o("input",{key:"3e50fac523ae8a776f4468782a079d8a4206ac45",ref:e=>{this.inputRef=e,e&&(this.directory?e.setAttribute("webkitdirectory",""):e.removeAttribute("webkitdirectory"))},type:"file",class:"fu-input-hidden",accept:this.accept,multiple:this.multiple||this.directory,capture:!0===this.capture?"environment":this.capture||void 0,onChange:this.handleFileInput}),this.renderQueueDialog(),this.renderPreviewDialog())}static get style(){return'@charset "UTF-8";.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;font-family:inherit}:host(.is-sideload){background:var(--bg-primary, white);border-radius:24px;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.12);border:1px solid var(--border-default, #e5e7eb)}.fu-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary, #374151);margin-bottom:6px}.fu-sideload-header{padding:32px 32px 16px 32px}.fu-header-title-row{display:flex;align-items:center;gap:16px;margin-bottom:24px}.fu-header-title-row h2{margin:0;font-size:28px;font-weight:500;color:var(--text-primary, #111827);flex:1}.fu-close-dialog{background:#ef4444 !important;color:white !important;border-radius:8px !important;width:36px;height:36px}.fu-sideload-zone{border:2px dashed var(--border-strong, #e5e7eb);border-radius:12px;padding:16px;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;background:var(--bg-secondary, #fdfdfd);transition:all 0.2s}.fu-sideload-zone:hover,.fu-sideload-zone.is-dragging{border-color:var(--color-primary, #10b981);background:rgba(16, 185, 129, 0.05)}.fu-sideload-zone span{font-size:15px;color:var(--text-secondary, #4b5563)}.fu-browse-pill{background:#10b981;color:white;padding:2px 12px;border-radius:20px;font-weight:600;margin-left:4px}.fu-zone{border:2px dashed var(--border-strong, #d1d5db);border-radius:14px;padding:40px 24px;text-align:center;cursor:pointer;background:var(--bg-primary, #fafafa);transition:border-color 0.2s, background 0.2s}.fu-zone:hover:not(.fu-disabled){border-color:var(--color-primary, #10b981);background:var(--bg-primary, #eff6ff)}.fu-zone.fu-dragging{border-color:var(--color-primary, #10b981);background:var(--bg-primary, #eff6ff);box-shadow:inset 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.fu-zone.fu-disabled{opacity:0.5;cursor:not-allowed}.fu-zone-icon{font-size:40px;margin-bottom:10px}.fu-file-list{display:flex;flex-direction:column;gap:10px;padding:16px 32px;max-height:400px;overflow-y:auto}.fu-file-list.is-sideload-list{padding:0 32px 32px 32px}.fu-file-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--border-default, #e5e7eb);border-radius:12px;background:var(--bg-primary, white);transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.02)}.fu-file-item:hover{border-color:var(--border-strong, #d1d5db);box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}.fu-file-item.is-error{background:var(--bg-primary, #fff1f2);border-color:#fecaca}.fu-file-item.is-error:hover{border-color:var(--color-error, #ef4444)}.fu-file-item.is-success{border-color:var(--color-success, #10b981);background:var(--bg-primary, #fcfdfc)}.fu-file-item.is-success:hover{border-color:var(--color-success, #10b981)}.fu-file-icon-wrapper{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s}.fu-file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fu-file-name-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.fu-file-name{font-size:14px;font-weight:500;color:var(--text-primary, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.fu-file-status{flex-shrink:0}.fu-status-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:12px;text-transform:uppercase;letter-spacing:0.05em}.fu-status-badge.is-success{background:rgba(16, 185, 129, 0.08);color:#10b981}.fu-status-badge.is-uploading{background:rgba(59, 130, 246, 0.08);color:#3b82f6}.fu-status-badge.is-pending{background:rgba(107, 114, 128, 0.08);color:#6b7280}.fu-status-badge.is-validating{background:rgba(245, 158, 11, 0.08);color:#f59e0b}.fu-status-badge.is-error{background:rgba(239, 68, 68, 0.08);color:#ef4444}.fu-spinner-dot{width:6px;height:6px;background:currentColor;border-radius:50%;animation:fu-pulse 1.2s infinite ease-in-out}@keyframes fu-pulse{0%,100%{transform:scale(0.6);opacity:0.5}50%{transform:scale(1.2);opacity:1}}.fu-file-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary, #6b7280)}.fu-file-size{font-weight:500}.fu-file-error-msg{color:#ef4444;font-weight:500;display:inline-flex;align-items:center;gap:4px;animation:fu-shake 0.3s ease-in-out}@keyframes fu-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}.fu-remove{color:#9ca3af !important;opacity:0.8;transition:all 0.2s !important}.fu-remove:hover{color:#ef4444 !important;opacity:1;transform:scale(1.05)}.fu-sideload-footer{padding:24px 32px;background:var(--bg-secondary, #f9fafb);border-top:1px solid var(--border-default, #e5e7eb);display:flex;align-items:center;justify-content:space-between}.fu-footer-actions-right{display:flex;gap:12px}.fu-trigger-row{display:flex;align-items:center;gap:16px}.fu-actions{display:flex;gap:8px}.fu-progress-bar{height:6px;background:#e5e7eb;border-radius:3px;margin-top:10px;overflow:hidden}.fu-progress-fill{height:100%;background:#10b981;transition:width 0.3s ease}.fu-input-hidden{display:none}.fu-file-item.is-clickable{cursor:pointer}.fu-file-item.is-clickable:hover{background:var(--bg-secondary, #f9fafb);border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--border-default, #e5e7eb)}.fu-zone-has-files{border-color:var(--color-primary, #10b981)}.fu-zone-queue-badge{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 14px;background:rgba(16, 185, 129, 0.1);border:1.5px solid rgba(16, 185, 129, 0.35);border-radius:20px;font-size:13px;font-weight:600;color:var(--color-primary-text, #047857);cursor:pointer;transition:background 0.15s, box-shadow 0.15s;z-index:1}.fu-zone-queue-badge:hover{background:rgba(16, 185, 129, 0.18);box-shadow:0 0 0 3px rgba(16, 185, 129, 0.15)}.fu-zone-queue-view{opacity:0.75;font-weight:700;margin-left:2px}.fu-view-queue-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--bg-secondary, #f3f4f6);border:1.5px solid var(--border-default, #e5e7eb);border-radius:20px;font-size:13px;font-weight:600;color:var(--text-primary, #374151);cursor:pointer;transition:background 0.15s, border-color 0.15s, color 0.15s}.fu-view-queue-btn:hover{background:rgba(16, 185, 129, 0.08);border-color:var(--color-primary, #10b981);color:var(--color-primary-text, #047857)}.fu-queue-backdrop{position:fixed;inset:0;z-index:99998;background:rgba(0, 0, 0, 0.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:fu-fade-in 0.15s ease}.fu-queue-dialog{background:var(--bg-primary, #ffffff);border-radius:20px;width:min(560px, 100vw - 32px);max-height:min(88dvh, 88vh, 680px);display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.06);overflow:clip;animation:fu-dialog-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1)}.fu-queue-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border-default, #e5e7eb);flex-shrink:0}.fu-queue-header-right{display:flex;align-items:center;gap:8px}.fu-upload-mode-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.01em}.fu-upload-mode-badge.is-auto{background:rgba(16, 185, 129, 0.1);color:var(--color-primary-text, #047857);border:1px solid rgba(16, 185, 129, 0.25)}.fu-upload-mode-badge.is-manual{background:rgba(99, 102, 241, 0.1);color:#4f46e5;border:1px solid rgba(99, 102, 241, 0.25)}.fu-queue-manual-banner{display:flex;align-items:center;gap:8px;padding:10px 20px;background:rgba(99, 102, 241, 0.06);border-bottom:1px solid rgba(99, 102, 241, 0.15);font-size:13px;color:var(--text-secondary, #4b5563);flex-shrink:0}.fu-queue-manual-banner strong{color:#4f46e5;font-weight:700}.fu-queue-dialog--manual .fu-queue-footer{background:rgba(99, 102, 241, 0.03)}.fu-upload-icon-text{font-size:36px;line-height:1}.fu-inline-trigger{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;background:transparent;border:1.5px solid var(--border-default, #e2e8f0);border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-primary, #374151);transition:background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;position:relative;white-space:nowrap;user-select:none}.fu-inline-trigger:hover:not(.fu-inline-disabled){background:var(--bg-secondary, #f1f5f9);border-color:var(--color-primary, #10b981);color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(16, 185, 129, 0.1)}.fu-inline-trigger:active:not(.fu-inline-disabled){background:rgba(16, 185, 129, 0.08);box-shadow:none}.fu-inline-trigger.fu-inline-active{border-color:var(--color-primary, #10b981);color:var(--color-primary, #10b981);background:rgba(16, 185, 129, 0.05)}.fu-inline-trigger.fu-inline-disabled{opacity:0.45;cursor:not-allowed}.fu-inline-icon{display:inline-flex;align-items:center;flex-shrink:0}.fu-inline-label{line-height:1.2}.fu-inline-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--color-primary, #10b981);color:#fff;font-size:10px;font-weight:800;line-height:1;cursor:pointer;transition:background 0.15s, transform 0.15s}.fu-inline-badge:hover{background:#059669;transform:scale(1.1)}.fu-queue-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--text-primary, #111827)}.fu-queue-count-pill{padding:2px 10px;border-radius:20px;background:rgba(16, 185, 129, 0.12);color:var(--color-primary-text, #047857);font-size:12px;font-weight:700;border:1px solid rgba(16, 185, 129, 0.3)}.fu-queue-errors{padding:10px 20px;border-bottom:1px solid rgba(239, 68, 68, 0.25);background:rgba(254, 242, 242, 0.8);display:flex;flex-direction:column;gap:6px;flex-shrink:0;max-height:120px;overflow-y:auto}.fu-queue-error-item{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#ef4444}.fu-queue-summary{display:flex;align-items:center;gap:16px;padding:8px 20px;border-bottom:1px solid var(--border-default, #e5e7eb);background:var(--bg-secondary, #f9fafb);flex-shrink:0;flex-wrap:wrap}.fu-queue-summary-stat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-secondary, #6b7280)}.fu-queue-summary-stat.is-auto{color:#3b82f6}.fu-queue-summary-stat.is-complete{color:#10b981}.fu-qs-dot{width:8px;height:8px;border-radius:50%}.fu-qs-dot.success{background:#10b981}.fu-qs-dot.pending{background:#6366f1}.fu-qs-dot.error{background:#ef4444}.fu-queue-list{flex:1;min-height:0;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px}.fu-queue-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 0;color:var(--text-muted, #9ca3af);font-size:14px;font-weight:500}.fu-queue-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 20px 18px;border-top:1px solid var(--border-default, #e5e7eb);background:var(--bg-secondary, #f9fafb);flex-shrink:0;position:relative;z-index:1}.fu-queue-footer-left,.fu-queue-footer-right{display:flex;align-items:center;gap:8px}.fu-dialog-backdrop{position:fixed;inset:0;z-index:99999;background:rgba(0, 0, 0, 0.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;animation:fu-fade-in 0.15s ease}@keyframes fu-fade-in{from{opacity:0}to{opacity:1}}.fu-dialog{background:var(--bg-primary, #ffffff);border-radius:18px;width:min(480px, 100vw - 32px);max-height:min(90vh, 640px);display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.06);overflow:hidden;animation:fu-dialog-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1)}@keyframes fu-dialog-in{from{opacity:0;transform:scale(0.92) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}.fu-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border-default, #e5e7eb)}.fu-dialog-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--text-primary, #111827)}.fu-dialog-preview{background:var(--bg-secondary, #f8fafc);border-bottom:1px solid var(--border-default, #e5e7eb);display:flex;align-items:center;justify-content:center;min-height:180px;max-height:260px;overflow:hidden;padding:16px}.fu-dialog-image{max-width:100%;max-height:228px;object-fit:contain;border-radius:8px;box-shadow:0 4px 16px rgba(0, 0, 0, 0.1)}.fu-dialog-file-icon{width:96px;height:96px;border-radius:20px;display:flex;align-items:center;justify-content:center}.fu-dialog-info{padding:20px 24px 16px;display:flex;flex-direction:column;gap:10px;flex:1;overflow-y:auto}.fu-dialog-name{font-size:15px;font-weight:700;color:var(--text-primary, #111827);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fu-dialog-meta{display:flex;gap:16px;flex-wrap:wrap}.fu-dialog-meta-item{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-secondary, #6b7280);font-weight:500}.fu-dialog-status-row{display:flex}.fu-dialog-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700}.fu-dialog-badge.is-success{background:rgba(16, 185, 129, 0.1);color:#10b981}.fu-dialog-badge.is-error{background:rgba(239, 68, 68, 0.1);color:#ef4444}.fu-dialog-badge.is-pending{background:rgba(99, 102, 241, 0.1);color:#6366f1}.fu-dialog-badge.is-uploading{background:rgba(59, 130, 246, 0.1);color:#3b82f6}.fu-dialog-badge.is-validating{background:rgba(245, 158, 11, 0.1);color:#f59e0b}.fu-dialog-progress{height:6px;background:var(--border-default, #e5e7eb);border-radius:3px;overflow:hidden;margin-top:4px}.fu-dialog-progress-fill{height:100%;background:var(--color-primary, #10b981);border-radius:3px;transition:width 0.4s ease}.fu-dialog-footer{display:flex;align-items:center;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--border-default, #e5e7eb)}.fu-dialog-nav-count{font-size:12px;font-weight:600;color:var(--text-secondary, #6b7280);min-width:40px;text-align:center}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-backdrop,:host-context(.dark) .fu-dialog-backdrop,:host-context([data-theme=dark]) .fu-queue-backdrop,:host-context([data-theme=dark]) .fu-dialog-backdrop,:host(.dark) .fu-queue-backdrop,:host(.dark) .fu-dialog-backdrop,:host([data-theme=dark]) .fu-queue-backdrop,:host([data-theme=dark]) .fu-dialog-backdrop{background:rgba(0, 0, 0, 0.65);backdrop-filter:blur(6px)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-dialog,:host-context(.dark) .fu-dialog,:host-context([data-theme=dark]) .fu-queue-dialog,:host-context([data-theme=dark]) .fu-dialog,:host(.dark) .fu-queue-dialog,:host(.dark) .fu-dialog,:host([data-theme=dark]) .fu-queue-dialog,:host([data-theme=dark]) .fu-dialog{background:var(--bg-primary, #1e293b);box-shadow:0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-inline-trigger,:host-context([data-theme=dark]) .fu-inline-trigger,:host(.dark) .fu-inline-trigger,:host([data-theme=dark]) .fu-inline-trigger{border-color:var(--border-default, #334155);color:var(--text-primary, #e2e8f0)}:host-context(.dark) .fu-inline-trigger:hover:not(.fu-inline-disabled),:host-context([data-theme=dark]) .fu-inline-trigger:hover:not(.fu-inline-disabled),:host(.dark) .fu-inline-trigger:hover:not(.fu-inline-disabled),:host([data-theme=dark]) .fu-inline-trigger:hover:not(.fu-inline-disabled){background:rgba(255, 255, 255, 0.06);border-color:var(--color-primary, #10b981);color:#34d399;box-shadow:0 0 0 3px rgba(16, 185, 129, 0.12)}:host-context(.dark) .fu-inline-trigger.fu-inline-active,:host-context([data-theme=dark]) .fu-inline-trigger.fu-inline-active,:host(.dark) .fu-inline-trigger.fu-inline-active,:host([data-theme=dark]) .fu-inline-trigger.fu-inline-active{border-color:#34d399;color:#34d399;background:rgba(52, 211, 153, 0.06)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-upload-mode-badge.is-auto,:host-context([data-theme=dark]) .fu-upload-mode-badge.is-auto,:host(.dark) .fu-upload-mode-badge.is-auto,:host([data-theme=dark]) .fu-upload-mode-badge.is-auto{background:rgba(16, 185, 129, 0.15);color:#34d399;border-color:rgba(52, 211, 153, 0.3)}:host-context(.dark) .fu-upload-mode-badge.is-manual,:host-context([data-theme=dark]) .fu-upload-mode-badge.is-manual,:host(.dark) .fu-upload-mode-badge.is-manual,:host([data-theme=dark]) .fu-upload-mode-badge.is-manual{background:rgba(99, 102, 241, 0.15);color:#a5b4fc;border-color:rgba(165, 180, 252, 0.3)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-manual-banner,:host-context([data-theme=dark]) .fu-queue-manual-banner,:host(.dark) .fu-queue-manual-banner,:host([data-theme=dark]) .fu-queue-manual-banner{background:rgba(99, 102, 241, 0.08);border-bottom-color:rgba(99, 102, 241, 0.2);color:var(--text-secondary, #94a3b8)}:host-context(.dark) .fu-queue-manual-banner strong,:host-context([data-theme=dark]) .fu-queue-manual-banner strong,:host(.dark) .fu-queue-manual-banner strong,:host([data-theme=dark]) .fu-queue-manual-banner strong{color:#a5b4fc}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-header,:host-context(.dark) .fu-dialog-header,:host-context([data-theme=dark]) .fu-queue-header,:host-context([data-theme=dark]) .fu-dialog-header,:host(.dark) .fu-queue-header,:host(.dark) .fu-dialog-header,:host([data-theme=dark]) .fu-queue-header,:host([data-theme=dark]) .fu-dialog-header{border-bottom-color:var(--border-default, #334155)}:host-context(.dark) .fu-queue-title,:host-context(.dark) .fu-dialog-title,:host-context([data-theme=dark]) .fu-queue-title,:host-context([data-theme=dark]) .fu-dialog-title,:host(.dark) .fu-queue-title,:host(.dark) .fu-dialog-title,:host([data-theme=dark]) .fu-queue-title,:host([data-theme=dark]) .fu-dialog-title{color:var(--text-primary, #f1f5f9)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-count-pill,:host-context([data-theme=dark]) .fu-queue-count-pill,:host(.dark) .fu-queue-count-pill,:host([data-theme=dark]) .fu-queue-count-pill{background:rgba(16, 185, 129, 0.18);color:#34d399;border-color:rgba(52, 211, 153, 0.3)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-errors,:host-context([data-theme=dark]) .fu-queue-errors,:host(.dark) .fu-queue-errors,:host([data-theme=dark]) .fu-queue-errors{background:rgba(239, 68, 68, 0.1);border-bottom-color:rgba(239, 68, 68, 0.25)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-summary,:host-context([data-theme=dark]) .fu-queue-summary,:host(.dark) .fu-queue-summary,:host([data-theme=dark]) .fu-queue-summary{background:var(--bg-secondary, #0f172a);border-bottom-color:var(--border-default, #334155)}:host-context(.dark) .fu-queue-summary-stat,:host-context([data-theme=dark]) .fu-queue-summary-stat,:host(.dark) .fu-queue-summary-stat,:host([data-theme=dark]) .fu-queue-summary-stat{color:var(--text-secondary, #94a3b8)}:host-context(.dark) .fu-queue-summary-stat.is-auto,:host-context([data-theme=dark]) .fu-queue-summary-stat.is-auto,:host(.dark) .fu-queue-summary-stat.is-auto,:host([data-theme=dark]) .fu-queue-summary-stat.is-auto{color:#93c5fd}:host-context(.dark) .fu-queue-summary-stat.is-complete,:host-context([data-theme=dark]) .fu-queue-summary-stat.is-complete,:host(.dark) .fu-queue-summary-stat.is-complete,:host([data-theme=dark]) .fu-queue-summary-stat.is-complete{color:#34d399}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-list,:host-context([data-theme=dark]) .fu-queue-list,:host(.dark) .fu-queue-list,:host([data-theme=dark]) .fu-queue-list{scrollbar-color:var(--border-default, #334155) transparent;scrollbar-width:thin}:host-context(.dark) .fu-queue-empty,:host-context([data-theme=dark]) .fu-queue-empty,:host(.dark) .fu-queue-empty,:host([data-theme=dark]) .fu-queue-empty{color:var(--text-muted, #64748b)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-file-item,:host-context([data-theme=dark]) .fu-file-item,:host(.dark) .fu-file-item,:host([data-theme=dark]) .fu-file-item{border-bottom-color:var(--border-default, #1e293b)}:host-context(.dark) .fu-file-item.is-clickable:hover,:host-context([data-theme=dark]) .fu-file-item.is-clickable:hover,:host(.dark) .fu-file-item.is-clickable:hover,:host([data-theme=dark]) .fu-file-item.is-clickable:hover{background:rgba(255, 255, 255, 0.05);box-shadow:inset 0 0 0 1.5px var(--border-default, #334155)}:host-context(.dark) .fu-file-name,:host-context([data-theme=dark]) .fu-file-name,:host(.dark) .fu-file-name,:host([data-theme=dark]) .fu-file-name{color:var(--text-primary, #f1f5f9)}:host-context(.dark) .fu-file-meta,:host-context([data-theme=dark]) .fu-file-meta,:host(.dark) .fu-file-meta,:host([data-theme=dark]) .fu-file-meta{color:var(--text-secondary, #94a3b8)}:host-context(.dark) .fu-file-error-msg,:host-context([data-theme=dark]) .fu-file-error-msg,:host(.dark) .fu-file-error-msg,:host([data-theme=dark]) .fu-file-error-msg{color:#f87171}:host-context(.dark) .fu-remove,:host-context([data-theme=dark]) .fu-remove,:host(.dark) .fu-remove,:host([data-theme=dark]) .fu-remove{color:#64748b !important}:host-context(.dark) .fu-remove:hover,:host-context([data-theme=dark]) .fu-remove:hover,:host(.dark) .fu-remove:hover,:host([data-theme=dark]) .fu-remove:hover{color:#f87171 !important}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-footer,:host-context([data-theme=dark]) .fu-queue-footer,:host(.dark) .fu-queue-footer,:host([data-theme=dark]) .fu-queue-footer{background:var(--bg-secondary, #0f172a);border-top-color:var(--border-default, #334155)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-status-badge.is-success,:host-context([data-theme=dark]) .fu-status-badge.is-success,:host(.dark) .fu-status-badge.is-success,:host([data-theme=dark]) .fu-status-badge.is-success{background:rgba(16, 185, 129, 0.15);color:#34d399}:host-context(.dark) .fu-status-badge.is-error,:host-context([data-theme=dark]) .fu-status-badge.is-error,:host(.dark) .fu-status-badge.is-error,:host([data-theme=dark]) .fu-status-badge.is-error{background:rgba(239, 68, 68, 0.15);color:#f87171}:host-context(.dark) .fu-status-badge.is-pending,:host-context([data-theme=dark]) .fu-status-badge.is-pending,:host(.dark) .fu-status-badge.is-pending,:host([data-theme=dark]) .fu-status-badge.is-pending{background:rgba(99, 102, 241, 0.15);color:#a5b4fc}:host-context(.dark) .fu-status-badge.is-uploading,:host-context([data-theme=dark]) .fu-status-badge.is-uploading,:host(.dark) .fu-status-badge.is-uploading,:host([data-theme=dark]) .fu-status-badge.is-uploading{background:rgba(59, 130, 246, 0.15);color:#93c5fd}:host-context(.dark) .fu-status-badge.is-validating,:host-context([data-theme=dark]) .fu-status-badge.is-validating,:host(.dark) .fu-status-badge.is-validating,:host([data-theme=dark]) .fu-status-badge.is-validating{background:rgba(245, 158, 11, 0.15);color:#fcd34d}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-dialog-preview,:host-context([data-theme=dark]) .fu-dialog-preview,:host(.dark) .fu-dialog-preview,:host([data-theme=dark]) .fu-dialog-preview{background:var(--bg-secondary, #0f172a);border-bottom-color:var(--border-default, #334155)}:host-context(.dark) .fu-dialog-image,:host-context([data-theme=dark]) .fu-dialog-image,:host(.dark) .fu-dialog-image,:host([data-theme=dark]) .fu-dialog-image{box-shadow:0 4px 24px rgba(0, 0, 0, 0.4)}:host-context(.dark) .fu-dialog-name,:host-context([data-theme=dark]) .fu-dialog-name,:host(.dark) .fu-dialog-name,:host([data-theme=dark]) .fu-dialog-name{color:var(--text-primary, #f1f5f9)}:host-context(.dark) .fu-dialog-meta-item,:host-context([data-theme=dark]) .fu-dialog-meta-item,:host(.dark) .fu-dialog-meta-item,:host([data-theme=dark]) .fu-dialog-meta-item{color:var(--text-secondary, #94a3b8)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-dialog-badge.is-success,:host-context([data-theme=dark]) .fu-dialog-badge.is-success,:host(.dark) .fu-dialog-badge.is-success,:host([data-theme=dark]) .fu-dialog-badge.is-success{background:rgba(16, 185, 129, 0.15);color:#34d399}:host-context(.dark) .fu-dialog-badge.is-error,:host-context([data-theme=dark]) .fu-dialog-badge.is-error,:host(.dark) .fu-dialog-badge.is-error,:host([data-theme=dark]) .fu-dialog-badge.is-error{background:rgba(239, 68, 68, 0.15);color:#f87171}:host-context(.dark) .fu-dialog-badge.is-pending,:host-context([data-theme=dark]) .fu-dialog-badge.is-pending,:host(.dark) .fu-dialog-badge.is-pending,:host([data-theme=dark]) .fu-dialog-badge.is-pending{background:rgba(99, 102, 241, 0.15);color:#a5b4fc}:host-context(.dark) .fu-dialog-badge.is-uploading,:host-context([data-theme=dark]) .fu-dialog-badge.is-uploading,:host(.dark) .fu-dialog-badge.is-uploading,:host([data-theme=dark]) .fu-dialog-badge.is-uploading{background:rgba(59, 130, 246, 0.15);color:#93c5fd}:host-context(.dark) .fu-dialog-badge.is-validating,:host-context([data-theme=dark]) .fu-dialog-badge.is-validating,:host(.dark) .fu-dialog-badge.is-validating,:host([data-theme=dark]) .fu-dialog-badge.is-validating{background:rgba(245, 158, 11, 0.15);color:#fcd34d}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-progress-bar,:host-context(.dark) .fu-dialog-progress,:host-context([data-theme=dark]) .fu-progress-bar,:host-context([data-theme=dark]) .fu-dialog-progress,:host(.dark) .fu-progress-bar,:host(.dark) .fu-dialog-progress,:host([data-theme=dark]) .fu-progress-bar,:host([data-theme=dark]) .fu-dialog-progress{background:rgba(255, 255, 255, 0.08)}:host-context(.dark) .fu-dialog-footer,:host-context([data-theme=dark]) .fu-dialog-footer,:host(.dark) .fu-dialog-footer,:host([data-theme=dark]) .fu-dialog-footer{border-top-color:var(--border-default, #334155)}:host-context(.dark) .fu-dialog-nav-count,:host-context([data-theme=dark]) .fu-dialog-nav-count,:host(.dark) .fu-dialog-nav-count,:host([data-theme=dark]) .fu-dialog-nav-count{color:var(--text-secondary, #94a3b8)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-zone-queue-badge,:host-context([data-theme=dark]) .fu-zone-queue-badge,:host(.dark) .fu-zone-queue-badge,:host([data-theme=dark]) .fu-zone-queue-badge{background:rgba(16, 185, 129, 0.12);border-color:rgba(52, 211, 153, 0.3);color:#34d399}:host-context(.dark) .fu-zone-queue-badge:hover,:host-context([data-theme=dark]) .fu-zone-queue-badge:hover,:host(.dark) .fu-zone-queue-badge:hover,:host([data-theme=dark]) .fu-zone-queue-badge:hover{background:rgba(16, 185, 129, 0.22)}:host-context(.dark) .fu-view-queue-btn,:host-context([data-theme=dark]) .fu-view-queue-btn,:host(.dark) .fu-view-queue-btn,:host([data-theme=dark]) .fu-view-queue-btn{background:var(--bg-secondary, #1e293b);border-color:var(--border-default, #334155);color:var(--text-primary, #f1f5f9)}:host-context(.dark) .fu-view-queue-btn:hover,:host-context([data-theme=dark]) .fu-view-queue-btn:hover,:host(.dark) .fu-view-queue-btn:hover,:host([data-theme=dark]) .fu-view-queue-btn:hover{background:rgba(16, 185, 129, 0.1);border-color:#34d399;color:#34d399}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-zone-has-files,:host-context([data-theme=dark]) .fu-zone-has-files,:host(.dark) .fu-zone-has-files,:host([data-theme=dark]) .fu-zone-has-files{background:rgba(16, 185, 129, 0.05)}@media (prefers-color-scheme: dark){.fu-queue-backdrop,.fu-dialog-backdrop{background:rgba(0, 0, 0, 0.65);backdrop-filter:blur(6px)}.fu-queue-dialog,.fu-dialog{background:var(--bg-primary, #1e293b);box-shadow:0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08)}.fu-inline-trigger{border-color:var(--border-default, #334155);color:var(--text-primary, #e2e8f0)}.fu-inline-trigger:hover:not(.fu-inline-disabled){background:rgba(255, 255, 255, 0.06);border-color:var(--color-primary, #10b981);color:#34d399;box-shadow:0 0 0 3px rgba(16, 185, 129, 0.12)}.fu-inline-trigger.fu-inline-active{border-color:#34d399;color:#34d399;background:rgba(52, 211, 153, 0.06)}.fu-upload-mode-badge.is-auto{background:rgba(16, 185, 129, 0.15);color:#34d399;border-color:rgba(52, 211, 153, 0.3)}.fu-upload-mode-badge.is-manual{background:rgba(99, 102, 241, 0.15);color:#a5b4fc;border-color:rgba(165, 180, 252, 0.3)}.fu-queue-manual-banner{background:rgba(99, 102, 241, 0.08);border-bottom-color:rgba(99, 102, 241, 0.2);color:var(--text-secondary, #94a3b8)}.fu-queue-manual-banner strong{color:#a5b4fc}.fu-queue-header,.fu-dialog-header{border-bottom-color:var(--border-default, #334155)}.fu-queue-title,.fu-dialog-title{color:var(--text-primary, #f1f5f9)}.fu-queue-count-pill{background:rgba(16, 185, 129, 0.18);color:#34d399;border-color:rgba(52, 211, 153, 0.3)}.fu-queue-errors{background:rgba(239, 68, 68, 0.1);border-bottom-color:rgba(239, 68, 68, 0.25)}.fu-queue-summary{background:var(--bg-secondary, #0f172a);border-bottom-color:var(--border-default, #334155)}.fu-queue-summary-stat{color:var(--text-secondary, #94a3b8)}.fu-queue-summary-stat.is-auto{color:#93c5fd}.fu-queue-summary-stat.is-complete{color:#34d399}.fu-queue-list{scrollbar-color:var(--border-default, #334155) transparent;scrollbar-width:thin}.fu-queue-empty{color:var(--text-muted, #64748b)}.fu-file-item{border-bottom-color:var(--border-default, #1e293b)}.fu-file-item.is-clickable:hover{background:rgba(255, 255, 255, 0.05);box-shadow:inset 0 0 0 1.5px var(--border-default, #334155)}.fu-file-name{color:var(--text-primary, #f1f5f9)}.fu-file-meta{color:var(--text-secondary, #94a3b8)}.fu-file-error-msg{color:#f87171}.fu-remove{color:#64748b !important}.fu-remove:hover{color:#f87171 !important}.fu-queue-footer{background:var(--bg-secondary, #0f172a);border-top-color:var(--border-default, #334155)}.fu-status-badge.is-success{background:rgba(16, 185, 129, 0.15);color:#34d399}.fu-status-badge.is-error{background:rgba(239, 68, 68, 0.15);color:#f87171}.fu-status-badge.is-pending{background:rgba(99, 102, 241, 0.15);color:#a5b4fc}.fu-status-badge.is-uploading{background:rgba(59, 130, 246, 0.15);color:#93c5fd}.fu-status-badge.is-validating{background:rgba(245, 158, 11, 0.15);color:#fcd34d}.fu-dialog-preview{background:var(--bg-secondary, #0f172a);border-bottom-color:var(--border-default, #334155)}.fu-dialog-image{box-shadow:0 4px 24px rgba(0, 0, 0, 0.4)}.fu-dialog-name{color:var(--text-primary, #f1f5f9)}.fu-dialog-meta-item{color:var(--text-secondary, #94a3b8)}.fu-dialog-badge.is-success{background:rgba(16, 185, 129, 0.15);color:#34d399}.fu-dialog-badge.is-error{background:rgba(239, 68, 68, 0.15);color:#f87171}.fu-dialog-badge.is-pending{background:rgba(99, 102, 241, 0.15);color:#a5b4fc}.fu-dialog-badge.is-uploading{background:rgba(59, 130, 246, 0.15);color:#93c5fd}.fu-dialog-badge.is-validating{background:rgba(245, 158, 11, 0.15);color:#fcd34d}.fu-progress-bar,.fu-dialog-progress{background:rgba(255, 255, 255, 0.08)}.fu-dialog-footer{border-top-color:var(--border-default, #334155)}.fu-dialog-nav-count{color:var(--text-secondary, #94a3b8)}.fu-zone-queue-badge{background:rgba(16, 185, 129, 0.12);border-color:rgba(52, 211, 153, 0.3);color:#34d399}.fu-zone-queue-badge:hover{background:rgba(16, 185, 129, 0.22)}.fu-view-queue-btn{background:var(--bg-secondary, #1e293b);border-color:var(--border-default, #334155);color:var(--text-primary, #f1f5f9)}.fu-view-queue-btn:hover{background:rgba(16, 185, 129, 0.1);border-color:#34d399;color:#34d399}.fu-zone-has-files{background:rgba(16, 185, 129, 0.05)}}'}},[513,"ui-file-upload",{label:[1],helperText:[1,"helper-text"],accept:[1],multiple:[4],maxSize:[2,"max-size"],minSize:[2,"min-size"],maxFiles:[2,"max-files"],showPreview:[4,"show-preview"],disabled:[4],variant:[1],uploadIcon:[1,"upload-icon"],rtl:[4],capture:[8],validateFileName:[4,"validate-file-name"],fileNamePattern:[1,"file-name-pattern"],showValidateButton:[4,"show-validate-button"],showUploadButton:[4,"show-upload-button"],autoUpload:[4,"auto-upload"],autoCloseOnSuccess:[4,"auto-close-on-success"],directory:[4],headerTitle:[1,"header-title"],isDragging:[32],files:[32],errors:[32],componentStatus:[32],isQueueOpen:[32],previewFileIndex:[32],removeInvalidFiles:[64],validate:[64],upload:[64],clear:[64]}]),c=u,f=function(){"undefined"!=typeof customElements&&["ui-file-upload","ui-badge","ui-button","ui-icon","ui-loader"].forEach((e=>{switch(e){case"ui-file-upload":customElements.get(i(e))||customElements.define(i(e),u);break;case"ui-badge":customElements.get(i(e))||s();break;case"ui-button":customElements.get(i(e))||d();break;case"ui-icon":customElements.get(i(e))||l();break;case"ui-loader":customElements.get(i(e))||n()}}))};export{c as UiFileUpload,f as defineCustomElement}

package/dist/components/ui-horizontal-nav.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as i,createEvent as a,h as n,transformTag as o}from"@stencil/core/internal/client";import{d as e}from"./icon.js";const l=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.navItemClick=a(this,"navItemClick",7)}items=[];activeId;variant="default";size="md";align="start";scrollable=!1;showDivider=!1;fullWidth=!1;displayAs="buttons";iconLibrary="default";navItemClick;scrollLeft=0;canScrollLeft=!1;canScrollRight=!1;navRef;parseItems(){if("string"==typeof this.items)try{return JSON.parse(this.items)}catch(t){return console.error("Failed to parse items JSON:",t),[]}return this.items}handleItemClick=(t,i)=>{t.disabled?i.preventDefault():(t.href||i.preventDefault(),this.activeId=t.id,this.navItemClick.emit(t))};handleScroll=()=>{if(!this.navRef)return;const{scrollLeft:t,scrollWidth:i,clientWidth:a}=this.navRef;this.scrollLeft=t,this.canScrollLeft=t>0,this.canScrollRight=t<i-a-1};scrollToDirection=t=>{this.navRef&&this.navRef.scrollTo({left:"left"===t?this.navRef.scrollLeft-200:this.navRef.scrollLeft+200,behavior:"smooth"})};componentDidLoad(){this.scrollable&&this.navRef&&this.handleScroll()}render(){const t=this.parseItems(),i={"horizontal-nav-container":!0,scrollable:this.scrollable},a={"horizontal-nav":!0,["variant-"+this.variant]:!0,["size-"+this.size]:!0,["align-"+this.align]:!0,"full-width":this.fullWidth,"with-divider":this.showDivider,["display-"+this.displayAs]:!0};return n("div",{key:"fbcf314495c91cb99bc90db33029196edfdb63a2",class:i},this.scrollable&&this.canScrollLeft&&n("button",{key:"f8de2c214e9d6f5b2a98c8f15dd11d21590e21bc",class:"scroll-button left",onClick:()=>this.scrollToDirection("left"),"aria-label":"Scroll left"},n("svg",{key:"f578cf8f8051944b9d172fb4d6b97e23e0534e1a",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},n("polyline",{key:"dc8225738c6d416bff540136ce13421bf92ab06d",points:"15 18 9 12 15 6"}))),n("nav",{key:"3296d5d35db2f5447bbf0081e4a2670e65b25046",class:a,ref:t=>this.navRef=t,onScroll:this.handleScroll},n("ul",{key:"66db7520e79ced35998900fb72abe09ac99b15c1",class:"nav-list"},t.map((t=>this.renderItem(t))))),this.scrollable&&this.canScrollRight&&n("button",{key:"bdf0b40342ff2c07a541258a4cda3310dfa07c5e",class:"scroll-button right",onClick:()=>this.scrollToDirection("right"),"aria-label":"Scroll right"},n("svg",{key:"6cd30d589d60113d2e3cccda8d6c3f7914d23750",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},n("polyline",{key:"02dcff53f897c9dff39369fc1b9c48cd06cb5365",points:"9 18 15 12 9 6"}))))}renderItem(t){const i={"nav-item":!0,active:t.active||t.id===this.activeId,disabled:t.disabled},a=n("span",{class:"nav-item-content"},t.icon&&n("span",{class:"nav-icon"},n("ui-icon",{name:t.icon,library:t.iconLibrary||this.iconLibrary,size:"1.2em"})),n("span",{class:"nav-label"},t.label),t.badge&&n("span",{class:"nav-badge"},t.badge));return n("li",{key:t.id,class:"nav-list-item"},t.href&&!t.disabled?n("a",{href:t.href,class:i,onClick:i=>this.handleItemClick(t,i)},a):n("button",{class:i,disabled:t.disabled,onClick:i=>this.handleItemClick(t,i)},a))}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;width:100%}.horizontal-nav-container{position:relative;display:flex;align-items:center;width:100%}.horizontal-nav-container.scrollable .horizontal-nav{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.horizontal-nav-container.scrollable .horizontal-nav::-webkit-scrollbar{display:none}.horizontal-nav{display:flex;width:100%;background-color:#ffffff;border-radius:8px;padding:4px}.nav-list{display:flex;list-style:none;margin:0;padding:0;gap:4px;width:100%}.horizontal-nav.full-width .nav-list{flex:1}.horizontal-nav.full-width .nav-list-item{flex:1}.horizontal-nav.full-width .nav-item{width:100%;justify-content:center}.horizontal-nav.align-start .nav-list{justify-content:flex-start}.horizontal-nav.align-center .nav-list{justify-content:center}.horizontal-nav.align-end .nav-list{justify-content:flex-end}.horizontal-nav.align-space-between .nav-list{justify-content:space-between}.nav-list-item{display:flex}.nav-item{display:flex;align-items:center;gap:8px;padding:8px 16px;background:none;border:none;border-radius:6px;color:#64748b;text-decoration:none;font-weight:500;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;font-size:14px;position:relative}.horizontal-nav.size-sm .nav-item{padding:6px 12px;font-size:12px;gap:6px}.horizontal-nav.size-md .nav-item{padding:8px 16px;font-size:14px;gap:8px}.horizontal-nav.size-lg .nav-item{padding:10px 20px;font-size:16px;gap:10px}.horizontal-nav.variant-default .nav-item:hover:not(.disabled):not(.active){background-color:#f1f5f9;color:#475569}.horizontal-nav.variant-default .nav-item.active{background-color:#eff6ff;color:#3b82f6}.horizontal-nav.variant-pills .nav-item{border-radius:20px}.horizontal-nav.variant-pills .nav-item:hover:not(.disabled):not(.active){background-color:#f1f5f9;color:#475569}.horizontal-nav.variant-pills .nav-item.active{background-color:#3b82f6;color:white}.horizontal-nav.variant-underline{background-color:transparent;border-bottom:1px solid #e2e8f0;border-radius:0;padding:0}.horizontal-nav.variant-underline .nav-item{border-radius:0;padding-bottom:12px;margin-bottom:-1px}.horizontal-nav.variant-underline .nav-item::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:transparent;transition:background-color 0.2s ease}.horizontal-nav.variant-underline .nav-item:hover:not(.disabled):not(.active){color:#475569}.horizontal-nav.variant-underline .nav-item:hover:not(.disabled):not(.active)::after{background-color:#cbd5e1}.horizontal-nav.variant-underline .nav-item.active{color:#3b82f6}.horizontal-nav.variant-underline .nav-item.active::after{background-color:#3b82f6}.horizontal-nav.variant-segmented{background-color:#f1f5f9;border-radius:8px;padding:4px}.horizontal-nav.variant-segmented .nav-item{background-color:transparent}.horizontal-nav.variant-segmented .nav-item:hover:not(.disabled):not(.active){background-color:rgba(255, 255, 255, 0.5)}.horizontal-nav.variant-segmented .nav-item.active{background-color:white;color:#1e293b;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.nav-item.disabled{opacity:0.4;cursor:not-allowed}.nav-item-content{display:flex;align-items:center;gap:inherit}.nav-icon{display:inline-flex;align-items:center;font-size:1.1em;line-height:1}.nav-icon svg{width:1em;height:1em;fill:currentColor}.nav-label{line-height:1}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;background-color:#ef4444;color:white;font-size:11px;font-weight:600;border-radius:10px;line-height:1}.nav-item.active .nav-badge{background-color:#dc2626}.horizontal-nav.with-divider .nav-list-item:not(:last-child)::after{content:"";width:1px;height:20px;background-color:#e2e8f0;margin:auto 4px}.scroll-button{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:white;border:1px solid #e2e8f0;border-radius:50%;cursor:pointer;z-index:10;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);transition:all 0.2s ease}.scroll-button:hover{background-color:#f8fafc;border-color:#cbd5e1}.scroll-button.left{left:4px}.scroll-button.right{right:4px}.scroll-button svg{width:16px;height:16px;color:#64748b}.horizontal-nav.display-list{padding:0;background:transparent}.horizontal-nav.display-list .nav-list{flex-direction:column;gap:0}.horizontal-nav.display-list .nav-list-item{width:100%;border-bottom:1px solid #e5e7eb}.horizontal-nav.display-list .nav-list-item:last-child{border-bottom:none}.horizontal-nav.display-list .nav-item{width:100%;padding:12px 16px;border-radius:0;justify-content:flex-start;background-color:#ffffff}.horizontal-nav.display-list .nav-item:hover{background-color:#f9fafb}.horizontal-nav.display-list .nav-item.active{background-color:#eff6ff;border-left:3px solid #3b82f6;padding-left:13px}.horizontal-nav.display-list.variant-pills .nav-item,.horizontal-nav.display-list.variant-underline .nav-item,.horizontal-nav.display-list.variant-segmented .nav-item{border-radius:0}.horizontal-nav.display-list.variant-pills .nav-item.active{background-color:#eff6ff}.horizontal-nav.display-list.size-sm .nav-item{padding:8px 12px}.horizontal-nav.display-list.size-sm .nav-item.active{padding-left:9px}.horizontal-nav.display-list.size-lg .nav-item{padding:16px 20px}.horizontal-nav.display-list.size-lg .nav-item.active{padding-left:17px}@media (max-width: 640px){.horizontal-nav.size-md .nav-item{padding:6px 12px;font-size:13px}.horizontal-nav.size-lg .nav-item{padding:8px 16px;font-size:14px}}'}},[513,"ui-horizontal-nav",{items:[1],activeId:[1025,"active-id"],variant:[1],size:[1],align:[1],scrollable:[4],showDivider:[4,"show-divider"],fullWidth:[4,"full-width"],displayAs:[1,"display-as"],iconLibrary:[1,"icon-library"],scrollLeft:[32],canScrollLeft:[32],canScrollRight:[32]}]),r=l,s=function(){"undefined"!=typeof customElements&&["ui-horizontal-nav","ui-icon"].forEach((t=>{switch(t){case"ui-horizontal-nav":customElements.get(o(t))||customElements.define(o(t),l);break;case"ui-icon":customElements.get(o(t))||e()}}))};export{r as UiHorizontalNav,s as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as i,createEvent as a,h as n,transformTag as o}from"@stencil/core/internal/client";import{d as e}from"./icon.js";import{d as r}from"./loader.js";const l=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.navItemClick=a(this,"navItemClick",7)}items=[];activeId;variant="default";size="md";align="start";scrollable=!1;showDivider=!1;fullWidth=!1;displayAs="buttons";iconLibrary="default";navItemClick;scrollLeft=0;canScrollLeft=!1;canScrollRight=!1;navRef;parseItems(){if("string"==typeof this.items)try{return JSON.parse(this.items)}catch(t){return console.error("Failed to parse items JSON:",t),[]}return this.items}handleItemClick=(t,i)=>{t.disabled?i.preventDefault():(t.href||i.preventDefault(),this.activeId=t.id,this.navItemClick.emit(t))};handleScroll=()=>{if(!this.navRef)return;const{scrollLeft:t,scrollWidth:i,clientWidth:a}=this.navRef;this.scrollLeft=t,this.canScrollLeft=t>0,this.canScrollRight=t<i-a-1};scrollToDirection=t=>{this.navRef&&this.navRef.scrollTo({left:"left"===t?this.navRef.scrollLeft-200:this.navRef.scrollLeft+200,behavior:"smooth"})};componentDidLoad(){this.scrollable&&this.navRef&&this.handleScroll()}render(){const t=this.parseItems(),i={"horizontal-nav-container":!0,scrollable:this.scrollable},a={"horizontal-nav":!0,["variant-"+this.variant]:!0,["size-"+this.size]:!0,["align-"+this.align]:!0,"full-width":this.fullWidth,"with-divider":this.showDivider,["display-"+this.displayAs]:!0};return n("div",{key:"fbcf314495c91cb99bc90db33029196edfdb63a2",class:i},this.scrollable&&this.canScrollLeft&&n("button",{key:"f8de2c214e9d6f5b2a98c8f15dd11d21590e21bc",class:"scroll-button left",onClick:()=>this.scrollToDirection("left"),"aria-label":"Scroll left"},n("svg",{key:"f578cf8f8051944b9d172fb4d6b97e23e0534e1a",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},n("polyline",{key:"dc8225738c6d416bff540136ce13421bf92ab06d",points:"15 18 9 12 15 6"}))),n("nav",{key:"3296d5d35db2f5447bbf0081e4a2670e65b25046",class:a,ref:t=>this.navRef=t,onScroll:this.handleScroll},n("ul",{key:"66db7520e79ced35998900fb72abe09ac99b15c1",class:"nav-list"},t.map((t=>this.renderItem(t))))),this.scrollable&&this.canScrollRight&&n("button",{key:"bdf0b40342ff2c07a541258a4cda3310dfa07c5e",class:"scroll-button right",onClick:()=>this.scrollToDirection("right"),"aria-label":"Scroll right"},n("svg",{key:"6cd30d589d60113d2e3cccda8d6c3f7914d23750",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},n("polyline",{key:"02dcff53f897c9dff39369fc1b9c48cd06cb5365",points:"9 18 15 12 9 6"}))))}renderItem(t){const i={"nav-item":!0,active:t.active||t.id===this.activeId,disabled:t.disabled},a=n("span",{class:"nav-item-content"},t.icon&&n("span",{class:"nav-icon"},n("ui-icon",{name:t.icon,library:t.iconLibrary||this.iconLibrary,size:"1.2em"})),n("span",{class:"nav-label"},t.label),t.badge&&n("span",{class:"nav-badge"},t.badge));return n("li",{key:t.id,class:"nav-list-item"},t.href&&!t.disabled?n("a",{href:t.href,class:i,onClick:i=>this.handleItemClick(t,i)},a):n("button",{class:i,disabled:t.disabled,onClick:i=>this.handleItemClick(t,i)},a))}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;width:100%}.horizontal-nav-container{position:relative;display:flex;align-items:center;width:100%}.horizontal-nav-container.scrollable .horizontal-nav{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.horizontal-nav-container.scrollable .horizontal-nav::-webkit-scrollbar{display:none}.horizontal-nav{display:flex;width:100%;background-color:#ffffff;border-radius:8px;padding:4px}.nav-list{display:flex;list-style:none;margin:0;padding:0;gap:4px;width:100%}.horizontal-nav.full-width .nav-list{flex:1}.horizontal-nav.full-width .nav-list-item{flex:1}.horizontal-nav.full-width .nav-item{width:100%;justify-content:center}.horizontal-nav.align-start .nav-list{justify-content:flex-start}.horizontal-nav.align-center .nav-list{justify-content:center}.horizontal-nav.align-end .nav-list{justify-content:flex-end}.horizontal-nav.align-space-between .nav-list{justify-content:space-between}.nav-list-item{display:flex}.nav-item{display:flex;align-items:center;gap:8px;padding:8px 16px;background:none;border:none;border-radius:6px;color:#64748b;text-decoration:none;font-weight:500;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;font-size:14px;position:relative}.horizontal-nav.size-sm .nav-item{padding:6px 12px;font-size:12px;gap:6px}.horizontal-nav.size-md .nav-item{padding:8px 16px;font-size:14px;gap:8px}.horizontal-nav.size-lg .nav-item{padding:10px 20px;font-size:16px;gap:10px}.horizontal-nav.variant-default .nav-item:hover:not(.disabled):not(.active){background-color:#f1f5f9;color:#475569}.horizontal-nav.variant-default .nav-item.active{background-color:var(--color-primary-subtle, rgba(59, 130, 246, 0.1));color:var(--color-primary, #3b82f6)}.horizontal-nav.variant-pills .nav-item{border-radius:20px}.horizontal-nav.variant-pills .nav-item:hover:not(.disabled):not(.active){background-color:#f1f5f9;color:#475569}.horizontal-nav.variant-pills .nav-item.active{background-color:var(--color-primary, #3b82f6);color:var(--text-inverse, white)}.horizontal-nav.variant-underline{background-color:transparent;border-bottom:1px solid #e2e8f0;border-radius:0;padding:0}.horizontal-nav.variant-underline .nav-item{border-radius:0;padding-bottom:12px;margin-bottom:-1px}.horizontal-nav.variant-underline .nav-item::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:transparent;transition:background-color 0.2s ease}.horizontal-nav.variant-underline .nav-item:hover:not(.disabled):not(.active){color:#475569}.horizontal-nav.variant-underline .nav-item:hover:not(.disabled):not(.active)::after{background-color:#cbd5e1}.horizontal-nav.variant-underline .nav-item.active{color:var(--color-primary, #3b82f6)}.horizontal-nav.variant-underline .nav-item.active::after{background-color:var(--color-primary, #3b82f6)}.horizontal-nav.variant-segmented{background-color:#f1f5f9;border-radius:8px;padding:4px}.horizontal-nav.variant-segmented .nav-item{background-color:transparent}.horizontal-nav.variant-segmented .nav-item:hover:not(.disabled):not(.active){background-color:rgba(255, 255, 255, 0.5)}.horizontal-nav.variant-segmented .nav-item.active{background-color:white;color:#1e293b;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.nav-item.disabled{opacity:0.4;cursor:not-allowed}.nav-item-content{display:flex;align-items:center;gap:inherit}.nav-icon{display:inline-flex;align-items:center;font-size:1.1em;line-height:1}.nav-icon svg{width:1em;height:1em;fill:currentColor}.nav-label{line-height:1}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;background-color:#ef4444;color:white;font-size:11px;font-weight:600;border-radius:10px;line-height:1}.nav-item.active .nav-badge{background-color:#dc2626}.horizontal-nav.with-divider .nav-list-item:not(:last-child)::after{content:"";width:1px;height:20px;background-color:#e2e8f0;margin:auto 4px}.scroll-button{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:white;border:1px solid #e2e8f0;border-radius:50%;cursor:pointer;z-index:10;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);transition:all 0.2s ease}.scroll-button:hover{background-color:#f8fafc;border-color:#cbd5e1}.scroll-button.left{left:4px}.scroll-button.right{right:4px}.scroll-button svg{width:16px;height:16px;color:#64748b}.horizontal-nav.display-list{padding:0;background:transparent}.horizontal-nav.display-list .nav-list{flex-direction:column;gap:0}.horizontal-nav.display-list .nav-list-item{width:100%;border-bottom:1px solid #e5e7eb}.horizontal-nav.display-list .nav-list-item:last-child{border-bottom:none}.horizontal-nav.display-list .nav-item{width:100%;padding:12px 16px;border-radius:0;justify-content:flex-start;background-color:#ffffff}.horizontal-nav.display-list .nav-item:hover{background-color:#f9fafb}.horizontal-nav.display-list .nav-item.active{background-color:var(--color-primary-subtle, rgba(59, 130, 246, 0.1));border-left:3px solid var(--color-primary, #3b82f6);padding-left:13px}.horizontal-nav.display-list.variant-pills .nav-item,.horizontal-nav.display-list.variant-underline .nav-item,.horizontal-nav.display-list.variant-segmented .nav-item{border-radius:0}.horizontal-nav.display-list.variant-pills .nav-item.active{background-color:var(--color-primary-subtle, rgba(59, 130, 246, 0.1))}.horizontal-nav.display-list.size-sm .nav-item{padding:8px 12px}.horizontal-nav.display-list.size-sm .nav-item.active{padding-left:9px}.horizontal-nav.display-list.size-lg .nav-item{padding:16px 20px}.horizontal-nav.display-list.size-lg .nav-item.active{padding-left:17px}@media (max-width: 640px){.horizontal-nav.size-md .nav-item{padding:6px 12px;font-size:13px}.horizontal-nav.size-lg .nav-item{padding:8px 16px;font-size:14px}}'}},[513,"ui-horizontal-nav",{items:[1],activeId:[1025,"active-id"],variant:[1],size:[1],align:[1],scrollable:[4],showDivider:[4,"show-divider"],fullWidth:[4,"full-width"],displayAs:[1,"display-as"],iconLibrary:[1,"icon-library"],scrollLeft:[32],canScrollLeft:[32],canScrollRight:[32]}]),s=l,d=function(){"undefined"!=typeof customElements&&["ui-horizontal-nav","ui-icon","ui-loader"].forEach((t=>{switch(t){case"ui-horizontal-nav":customElements.get(o(t))||customElements.define(o(t),l);break;case"ui-icon":customElements.get(o(t))||e();break;case"ui-loader":customElements.get(o(t))||r()}}))};export{s as UiHorizontalNav,d as defineCustomElement}

package/dist/components/ui-knob.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as i,createEvent as s,h as e,transformTag as a}from"@stencil/core/internal/client";import{d as o,a as n}from"./badge.js";import{d as h}from"./icon.js";import{d as r}from"./input.js";const l=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.knobChange=s(this,"knobChange",7),this.knobInput=s(this,"knobInput",7),this.internals=this.attachInternals()}get el(){return this}internals;name;value=0;min=0;max=100;step=1;size=120;strokeWidth=8;color="#3bf673";trackColor="#e2e8f0";gradient=!1;showValue=!0;valueSuffix="";showMinMax=!1;disabled=!1;readonly=!1;startAngle=135;endAngle=405;enableWheel=!0;showTicks=!1;tickCount=10;tickColor="#94a3b8";tickLength=.1;showLabels=!1;snap=!1;allowInput=!1;knobChange;knobInput;isDragging=!1;angle=0;isEditing=!1;gradientId="ui-knob-gradient-"+Math.random().toString(36).substr(2,9);knobRef;valueChanged(t){this.updateAngle(t),this.internals.setFormValue(""+t)}colorChanged(){this.normalizeProps()}propsChanged(){this.normalizeProps()}componentWillLoad(){this.normalizeProps(),this.updateAngle(this.value),this.internals.setFormValue(""+this.value)}normalizeProps(){try{"string"==typeof this.color&&this.color.startsWith("{")&&(this.color=JSON.parse(this.color))}catch(t){console.warn("Failed to parse knob color prop",t)}}updateAngle(t){this.angle=this.startAngle+(t-this.min)/(this.max-this.min)*(this.endAngle-this.startAngle)}handleMouseDown=t=>{this.disabled||this.readonly||(t.preventDefault(),this.isDragging=!0,this.updateValueFromEvent(t),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp))};handleMouseMove=t=>{this.isDragging&&(this.updateValueFromEvent(t),this.knobInput.emit(this.value))};handleMouseUp=()=>{this.isDragging&&(this.isDragging=!1,this.knobChange.emit(this.value),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp))};handleTouchStart=t=>{this.disabled||this.readonly||(t.preventDefault(),this.isDragging=!0,this.updateValueFromTouch(t))};handleTouchMove=t=>{this.isDragging&&(t.preventDefault(),this.updateValueFromTouch(t),this.knobInput.emit(this.value))};handleTouchEnd=()=>{this.isDragging&&(this.isDragging=!1,this.knobChange.emit(this.value))};handleWheel=t=>{if(!this.enableWheel||this.disabled||this.readonly)return;t.preventDefault();const i=Math.sign(t.deltaY);let s=this.value-i*this.step;s=Math.max(this.min,Math.min(this.max,s)),this.value=s,this.updateAngle(s),this.knobInput.emit(this.value),clearTimeout(this._wheelTimeout),this._wheelTimeout=setTimeout((()=>this.knobChange.emit(this.value)),100)};handleKeyDown=t=>{if(this.disabled||this.readonly)return;let i=this.value;const s=10*this.step;switch(t.key){case"ArrowRight":case"ArrowUp":i=Math.min(this.max,this.value+this.step);break;case"ArrowLeft":case"ArrowDown":i=Math.max(this.min,this.value-this.step);break;case"PageUp":i=Math.min(this.max,this.value+s);break;case"PageDown":i=Math.max(this.min,this.value-s);break;case"Home":i=this.min;break;case"End":i=this.max;break;default:return}i!==this.value&&(t.preventDefault(),this.value=i,this.updateAngle(i),this.knobInput.emit(this.value),this.knobChange.emit(this.value))};updateValueFromEvent(t){if(!this.knobRef)return;const i=this.knobRef.getBoundingClientRect();this.calculateValueFromAngle(t.clientX-(i.left+i.width/2),t.clientY-(i.top+i.height/2))}updateValueFromTouch(t){if(!this.knobRef||0===t.touches.length)return;const i=this.knobRef.getBoundingClientRect(),s=t.touches[0];this.calculateValueFromAngle(s.clientX-(i.left+i.width/2),s.clientY-(i.top+i.height/2))}calculateValueFromAngle(t,i){let s=Math.atan2(i,t)*(180/Math.PI)+90;s<0&&(s+=360);const e=this.endAngle-this.startAngle;s<this.startAngle&&(s=s+360>=this.startAngle?s+360:this.startAngle),s>this.endAngle&&s<this.startAngle+360&&(s=Math.abs(s-this.startAngle)<Math.abs(s-this.endAngle)?this.startAngle:this.endAngle),s=Math.max(this.startAngle,Math.min(this.endAngle,s));let a=this.min+(s-this.startAngle)/e*(this.max-this.min),o=a;o=this.snap?Math.round(a/this.step)*this.step:Math.round(100*a)/100,a=Math.max(this.min,Math.min(this.max,o)),this.value=a,this.angle=s}polarToCartesian(t,i,s,e){const a=(e-90)*Math.PI/180;return{x:t+s*Math.cos(a),y:i+s*Math.sin(a)}}describeArc(t,i,s,e,a){const o=this.polarToCartesian(t,i,s,a),n=this.polarToCartesian(t,i,s,e);return`M ${o.x} ${o.y} A ${s} ${s} 0 ${a-e<=180?"0":"1"} 0 ${n.x} ${n.y}`}componentDidLoad(){this.knobRef&&this.knobRef.addEventListener("wheel",this.handleWheel,{passive:!1})}disconnectedCallback(){document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.knobRef&&this.knobRef.removeEventListener("wheel",this.handleWheel)}startEditing=()=>{!this.allowInput||this.disabled||this.readonly||(this.isEditing=!0)};handleInputBlur=t=>{const i=parseFloat(t.target.value);if(!isNaN(i)){let t=Math.max(this.min,Math.min(this.max,i));t!==this.value&&(this.value=t,this.knobChange.emit(this.value))}this.isEditing=!1};handleInputChange=t=>{const i=parseFloat(t.target.value);isNaN(i)||(this.value=Math.max(this.min,Math.min(this.max,i)),this.knobChange.emit(this.value)),this.isEditing=!1};handleInputKeyDown=t=>{"Enter"===t.key&&t.target.blur()};render(){const t=this.size/2,i=(this.size-this.strokeWidth)/2,s=this.describeArc(t,t,i,this.startAngle,this.endAngle),a=this.describeArc(t,t,i,this.startAngle,this.angle);return e("div",{key:"1f7d0dbe9a1ba355b03c809bbcfcf41f8e7f4908",class:"knob-wrapper"},e("div",{key:"6db0b4bf73beef4a8762a6ab4ace921849a625a9",class:{"knob-container":!0,disabled:this.disabled,readonly:this.readonly,dragging:this.isDragging},ref:t=>this.knobRef=t,style:{width:this.size+"px",height:this.size+"px"},onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd,onKeyDown:this.handleKeyDown,tabIndex:this.disabled||this.readonly?-1:0,role:"slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.value,"aria-disabled":this.disabled,"aria-readonly":this.readonly},e("svg",{key:"b2cc5cb4755f3bf0ad12e1d248332813bd371b3c",width:this.size,height:this.size,class:"knob-svg"},(()=>{const t="object"==typeof this.color&&null!==this.color;if(!this.gradient&&!t)return null;const i=t&&this.color.to||"#10b981";return e("defs",null,e("linearGradient",{id:this.gradientId,x1:"0%",y1:"0%",x2:"100%",y2:"100%"},e("stop",{offset:"0%","stop-color":t&&this.color.from||("string"==typeof this.color?this.color:"#3bf673")}),e("stop",{offset:"100%","stop-color":i})))})(),e("path",{key:"c55188f1c67342a3813960c4cfd0427b65338308",d:s,fill:"none",stroke:this.trackColor,"stroke-width":this.strokeWidth,"stroke-linecap":"round"}),this.showTicks&&(()=>{const s=Math.max(2,this.tickCount),a=[],o=this.endAngle-this.startAngle;for(let n=0;n<=s;n++){const h=this.startAngle+o*n/s,r=this.polarToCartesian(t,t,i*(1-this.tickLength),h),l=this.polarToCartesian(t,t,i,h);a.push(e("line",{x1:r.x,y1:r.y,x2:l.x,y2:l.y,stroke:this.tickColor,"stroke-width":n%Math.max(1,Math.floor(s/5))==0?this.strokeWidth/2:this.strokeWidth/3,"stroke-linecap":"round"}))}return a})(),this.showLabels&&(()=>{const s=[],a=this.endAngle-this.startAngle,o=i-25;for(let i=0;i<=5;i++){const n=i/5,h=this.min+(this.max-this.min)*n,r=this.polarToCartesian(t,t,o,this.startAngle+a*n);s.push(e("text",{x:r.x,y:r.y,"text-anchor":"middle","dominant-baseline":"middle",class:"scale-label",fill:"#64748b","font-size":"10px"},Math.round(h)))}return s})(),e("path",{key:"de24763cf753ca6dbb0451ea3552a2df7fa26b08",d:a,fill:"none",stroke:(()=>this.gradient||"object"==typeof this.color&&null!==this.color?`url(#${this.gradientId})`:this.color)(),"stroke-width":this.strokeWidth,"stroke-linecap":"round",class:"value-arc"}),e("circle",{key:"3f0bba24738381e1be1bb06284d22af9c732a8be",cx:t,cy:t,r:this.strokeWidth/2,fill:(()=>this.gradient||"object"==typeof this.color&&null!==this.color?`url(#${this.gradientId})`:this.color)(),class:"center-dot"}),(()=>{const s=this.polarToCartesian(t,t,.3*i,this.angle),a=this.polarToCartesian(t,t,.85*i,this.angle);return e("line",{x1:s.x,y1:s.y,x2:a.x,y2:a.y,stroke:(()=>this.gradient||"object"==typeof this.color&&null!==this.color?`url(#${this.gradientId})`:this.color)(),"stroke-width":this.strokeWidth/2,"stroke-linecap":"round",class:"indicator"})})()),e("div",{key:"6cc71ee2d411ec36b5faedfe9818c0d6e4ca34ec",class:"value-label",onDblClick:this.startEditing},this.isEditing?e("ui-input",{type:"number",value:""+this.value,onInputBlur:this.handleInputBlur,onInputChange:t=>this.handleInputChange(t),onInputKeydown:t=>this.handleInputKeyDown(t.detail),autoFocus:!0,customClass:"knob-input",variant:"plain",size:"sm"}):this.showValue?e("span",null,e("span",{class:"value-number"},this.value),this.valueSuffix&&e("span",{class:"value-suffix"},this.valueSuffix)):e("slot",null))),this.showMinMax&&e("div",{key:"6e7327c12d9cd9cba02822c8bc8bf9ffcc421c5c",class:"min-max-labels"},e("span",{key:"bb01be7b35e752c30a9f19d62c5b31fe5b354292",class:"min-label"},this.min,this.valueSuffix),e("span",{key:"23aa1769d555a0b4aa4ac1b0dd2e90f4be599a2e",class:"max-label"},this.max,this.valueSuffix)))}static get formAssociated(){return!0}static get watchers(){return{value:[{valueChanged:0}],color:[{colorChanged:0}],tickCount:[{propsChanged:0}],tickLength:[{propsChanged:0}],showTicks:[{propsChanged: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}.knob-wrapper{display:flex;flex-direction:column;align-items:center;gap:12px}.knob-container{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;touch-action:none;transition:transform 0.1s ease}.knob-container:hover:not(.disabled):not(.readonly){transform:scale(1.02)}.knob-container.dragging{cursor:grabbing;transform:scale(1.05)}.knob-container.disabled,.knob-container.readonly{cursor:not-allowed;opacity:0.5}.knob-svg{display:block;overflow:visible}.value-arc{filter:drop-shadow(0 2px 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3));transition:stroke 0.2s ease}.knob-container:hover:not(.disabled):not(.readonly) .value-arc{filter:drop-shadow(0 3px 6px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4))}.center-dot{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))}.indicator{transition:all 0.1s ease;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))}.value-label{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;align-items:baseline;gap:2px;pointer-events:none;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}.value-number{font-size:calc(var(--knob-size, 120px) * 0.2);font-weight:700;color:var(--text-primary, #1e293b);line-height:1}.value-suffix{font-size:calc(var(--knob-size, 120px) * 0.12);font-weight:600;color:var(--text-muted, #64748b);line-height:1}.min-max-labels{display:flex;justify-content:space-between;width:100%;font-size:12px;color:var(--text-muted, #64748b);font-weight:500;padding:0 8px}.min-label,.max-label{white-space:nowrap}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.8}}.knob-container.dragging .value-label{animation:pulse 0.3s ease-in-out}.knob-container:active:not(.disabled):not(.readonly){transform:scale(1.05)}.knob-container:focus-visible{outline:2px solid var(--color-primary, #10b981);outline-offset:4px;border-radius:50%}@media (max-width: 640px){.value-number{font-size:calc(var(--knob-size, 120px) * 0.18)}.value-suffix{font-size:calc(var(--knob-size, 120px) * 0.11)}.min-max-labels{font-size:11px}}'}},[833,"ui-knob",{name:[1],value:[1026],min:[2],max:[2],step:[2],size:[2],strokeWidth:[2,"stroke-width"],color:[1],trackColor:[1,"track-color"],gradient:[4],showValue:[4,"show-value"],valueSuffix:[1,"value-suffix"],showMinMax:[4,"show-min-max"],disabled:[4],readonly:[4],startAngle:[2,"start-angle"],endAngle:[2,"end-angle"],enableWheel:[4,"enable-wheel"],showTicks:[4,"show-ticks"],tickCount:[2,"tick-count"],tickColor:[1,"tick-color"],tickLength:[2,"tick-length"],showLabels:[4,"show-labels"],snap:[4],allowInput:[4,"allow-input"],isDragging:[32],angle:[32],isEditing:[32],gradientId:[32]},void 0,{value:[{valueChanged:0}],color:[{colorChanged:0}],tickCount:[{propsChanged:0}],tickLength:[{propsChanged:0}],showTicks:[{propsChanged:0}]}]),c=l,d=function(){"undefined"!=typeof customElements&&["ui-knob","ui-badge","ui-button","ui-icon","ui-input"].forEach((t=>{switch(t){case"ui-knob":customElements.get(a(t))||customElements.define(a(t),l);break;case"ui-badge":customElements.get(a(t))||n();break;case"ui-button":customElements.get(a(t))||o();break;case"ui-icon":customElements.get(a(t))||h();break;case"ui-input":customElements.get(a(t))||r()}}))};export{c as UiKnob,d as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as i,createEvent as s,h as e,transformTag as a}from"@stencil/core/internal/client";import{d as o}from"./badge.js";import{d as n}from"./button.js";import{d as h}from"./icon.js";import{d as r}from"./input.js";import{d as l}from"./loader.js";const c=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.knobChange=s(this,"knobChange",7),this.knobInput=s(this,"knobInput",7),this.internals=this.attachInternals()}get el(){return this}internals;name;value=0;min=0;max=100;step=1;size=120;strokeWidth=8;color="#3bf673";trackColor="#e2e8f0";gradient=!1;showValue=!0;valueSuffix="";showMinMax=!1;disabled=!1;readonly=!1;startAngle=135;endAngle=405;enableWheel=!0;showTicks=!1;tickCount=10;tickColor="#94a3b8";tickLength=.1;showLabels=!1;snap=!1;allowInput=!1;knobChange;knobInput;isDragging=!1;angle=0;isEditing=!1;gradientId="ui-knob-gradient-"+Math.random().toString(36).substr(2,9);knobRef;valueChanged(t){this.updateAngle(t),this.internals.setFormValue(""+t)}colorChanged(){this.normalizeProps()}propsChanged(){this.normalizeProps()}componentWillLoad(){this.normalizeProps(),this.updateAngle(this.value),this.internals.setFormValue(""+this.value)}normalizeProps(){try{"string"==typeof this.color&&this.color.startsWith("{")&&(this.color=JSON.parse(this.color))}catch(t){console.warn("Failed to parse knob color prop",t)}}updateAngle(t){this.angle=this.startAngle+(t-this.min)/(this.max-this.min)*(this.endAngle-this.startAngle)}handleMouseDown=t=>{this.disabled||this.readonly||(t.preventDefault(),this.isDragging=!0,this.updateValueFromEvent(t),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp))};handleMouseMove=t=>{this.isDragging&&(this.updateValueFromEvent(t),this.knobInput.emit(this.value))};handleMouseUp=()=>{this.isDragging&&(this.isDragging=!1,this.knobChange.emit(this.value),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp))};handleTouchStart=t=>{this.disabled||this.readonly||(t.preventDefault(),this.isDragging=!0,this.updateValueFromTouch(t))};handleTouchMove=t=>{this.isDragging&&(t.preventDefault(),this.updateValueFromTouch(t),this.knobInput.emit(this.value))};handleTouchEnd=()=>{this.isDragging&&(this.isDragging=!1,this.knobChange.emit(this.value))};handleWheel=t=>{if(!this.enableWheel||this.disabled||this.readonly)return;t.preventDefault();const i=Math.sign(t.deltaY);let s=this.value-i*this.step;s=Math.max(this.min,Math.min(this.max,s)),this.value=s,this.updateAngle(s),this.knobInput.emit(this.value),clearTimeout(this._wheelTimeout),this._wheelTimeout=setTimeout((()=>this.knobChange.emit(this.value)),100)};handleKeyDown=t=>{if(this.disabled||this.readonly)return;let i=this.value;const s=10*this.step;switch(t.key){case"ArrowRight":case"ArrowUp":i=Math.min(this.max,this.value+this.step);break;case"ArrowLeft":case"ArrowDown":i=Math.max(this.min,this.value-this.step);break;case"PageUp":i=Math.min(this.max,this.value+s);break;case"PageDown":i=Math.max(this.min,this.value-s);break;case"Home":i=this.min;break;case"End":i=this.max;break;default:return}i!==this.value&&(t.preventDefault(),this.value=i,this.updateAngle(i),this.knobInput.emit(this.value),this.knobChange.emit(this.value))};updateValueFromEvent(t){if(!this.knobRef)return;const i=this.knobRef.getBoundingClientRect();this.calculateValueFromAngle(t.clientX-(i.left+i.width/2),t.clientY-(i.top+i.height/2))}updateValueFromTouch(t){if(!this.knobRef||0===t.touches.length)return;const i=this.knobRef.getBoundingClientRect(),s=t.touches[0];this.calculateValueFromAngle(s.clientX-(i.left+i.width/2),s.clientY-(i.top+i.height/2))}calculateValueFromAngle(t,i){let s=Math.atan2(i,t)*(180/Math.PI)+90;s<0&&(s+=360);const e=this.endAngle-this.startAngle;s<this.startAngle&&(s=s+360>=this.startAngle?s+360:this.startAngle),s>this.endAngle&&s<this.startAngle+360&&(s=Math.abs(s-this.startAngle)<Math.abs(s-this.endAngle)?this.startAngle:this.endAngle),s=Math.max(this.startAngle,Math.min(this.endAngle,s));let a=this.min+(s-this.startAngle)/e*(this.max-this.min),o=a;o=this.snap?Math.round(a/this.step)*this.step:Math.round(100*a)/100,a=Math.max(this.min,Math.min(this.max,o)),this.value=a,this.angle=s}polarToCartesian(t,i,s,e){const a=(e-90)*Math.PI/180;return{x:t+s*Math.cos(a),y:i+s*Math.sin(a)}}describeArc(t,i,s,e,a){const o=this.polarToCartesian(t,i,s,a),n=this.polarToCartesian(t,i,s,e);return`M ${o.x} ${o.y} A ${s} ${s} 0 ${a-e<=180?"0":"1"} 0 ${n.x} ${n.y}`}componentDidLoad(){this.knobRef&&this.knobRef.addEventListener("wheel",this.handleWheel,{passive:!1})}disconnectedCallback(){document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.knobRef&&this.knobRef.removeEventListener("wheel",this.handleWheel)}startEditing=()=>{!this.allowInput||this.disabled||this.readonly||(this.isEditing=!0)};handleInputBlur=t=>{const i=parseFloat(t.target.value);if(!isNaN(i)){let t=Math.max(this.min,Math.min(this.max,i));t!==this.value&&(this.value=t,this.knobChange.emit(this.value))}this.isEditing=!1};handleInputChange=t=>{const i=parseFloat(t.target.value);isNaN(i)||(this.value=Math.max(this.min,Math.min(this.max,i)),this.knobChange.emit(this.value)),this.isEditing=!1};handleInputKeyDown=t=>{"Enter"===t.key&&t.target.blur()};render(){const t=this.size/2,i=(this.size-this.strokeWidth)/2,s=this.describeArc(t,t,i,this.startAngle,this.endAngle),a=this.describeArc(t,t,i,this.startAngle,this.angle);return e("div",{key:"1f7d0dbe9a1ba355b03c809bbcfcf41f8e7f4908",class:"knob-wrapper"},e("div",{key:"6db0b4bf73beef4a8762a6ab4ace921849a625a9",class:{"knob-container":!0,disabled:this.disabled,readonly:this.readonly,dragging:this.isDragging},ref:t=>this.knobRef=t,style:{width:this.size+"px",height:this.size+"px"},onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd,onKeyDown:this.handleKeyDown,tabIndex:this.disabled||this.readonly?-1:0,role:"slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.value,"aria-disabled":this.disabled,"aria-readonly":this.readonly},e("svg",{key:"b2cc5cb4755f3bf0ad12e1d248332813bd371b3c",width:this.size,height:this.size,class:"knob-svg"},(()=>{const t="object"==typeof this.color&&null!==this.color;if(!this.gradient&&!t)return null;const i=t&&this.color.to||"#10b981";return e("defs",null,e("linearGradient",{id:this.gradientId,x1:"0%",y1:"0%",x2:"100%",y2:"100%"},e("stop",{offset:"0%","stop-color":t&&this.color.from||("string"==typeof this.color?this.color:"#3bf673")}),e("stop",{offset:"100%","stop-color":i})))})(),e("path",{key:"c55188f1c67342a3813960c4cfd0427b65338308",d:s,fill:"none",stroke:this.trackColor,"stroke-width":this.strokeWidth,"stroke-linecap":"round"}),this.showTicks&&(()=>{const s=Math.max(2,this.tickCount),a=[],o=this.endAngle-this.startAngle;for(let n=0;n<=s;n++){const h=this.startAngle+o*n/s,r=this.polarToCartesian(t,t,i*(1-this.tickLength),h),l=this.polarToCartesian(t,t,i,h);a.push(e("line",{x1:r.x,y1:r.y,x2:l.x,y2:l.y,stroke:this.tickColor,"stroke-width":n%Math.max(1,Math.floor(s/5))==0?this.strokeWidth/2:this.strokeWidth/3,"stroke-linecap":"round"}))}return a})(),this.showLabels&&(()=>{const s=[],a=this.endAngle-this.startAngle,o=i-25;for(let i=0;i<=5;i++){const n=i/5,h=this.min+(this.max-this.min)*n,r=this.polarToCartesian(t,t,o,this.startAngle+a*n);s.push(e("text",{x:r.x,y:r.y,"text-anchor":"middle","dominant-baseline":"middle",class:"scale-label",fill:"#64748b","font-size":"10px"},Math.round(h)))}return s})(),e("path",{key:"de24763cf753ca6dbb0451ea3552a2df7fa26b08",d:a,fill:"none",stroke:(()=>this.gradient||"object"==typeof this.color&&null!==this.color?`url(#${this.gradientId})`:this.color)(),"stroke-width":this.strokeWidth,"stroke-linecap":"round",class:"value-arc"}),e("circle",{key:"3f0bba24738381e1be1bb06284d22af9c732a8be",cx:t,cy:t,r:this.strokeWidth/2,fill:(()=>this.gradient||"object"==typeof this.color&&null!==this.color?`url(#${this.gradientId})`:this.color)(),class:"center-dot"}),(()=>{const s=this.polarToCartesian(t,t,.3*i,this.angle),a=this.polarToCartesian(t,t,.85*i,this.angle);return e("line",{x1:s.x,y1:s.y,x2:a.x,y2:a.y,stroke:(()=>this.gradient||"object"==typeof this.color&&null!==this.color?`url(#${this.gradientId})`:this.color)(),"stroke-width":this.strokeWidth/2,"stroke-linecap":"round",class:"indicator"})})()),e("div",{key:"6cc71ee2d411ec36b5faedfe9818c0d6e4ca34ec",class:"value-label",onDblClick:this.startEditing},this.isEditing?e("ui-input",{type:"number",value:""+this.value,onInputBlur:this.handleInputBlur,onInputChange:t=>this.handleInputChange(t),onInputKeydown:t=>this.handleInputKeyDown(t.detail),autoFocus:!0,customClass:"knob-input",variant:"plain",size:"sm"}):this.showValue?e("span",null,e("span",{class:"value-number"},this.value),this.valueSuffix&&e("span",{class:"value-suffix"},this.valueSuffix)):e("slot",null))),this.showMinMax&&e("div",{key:"6e7327c12d9cd9cba02822c8bc8bf9ffcc421c5c",class:"min-max-labels"},e("span",{key:"bb01be7b35e752c30a9f19d62c5b31fe5b354292",class:"min-label"},this.min,this.valueSuffix),e("span",{key:"23aa1769d555a0b4aa4ac1b0dd2e90f4be599a2e",class:"max-label"},this.max,this.valueSuffix)))}static get formAssociated(){return!0}static get watchers(){return{value:[{valueChanged:0}],color:[{colorChanged:0}],tickCount:[{propsChanged:0}],tickLength:[{propsChanged:0}],showTicks:[{propsChanged: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}.knob-wrapper{display:flex;flex-direction:column;align-items:center;gap:12px}.knob-container{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;touch-action:none;transition:transform 0.1s ease}.knob-container:hover:not(.disabled):not(.readonly){transform:scale(1.02)}.knob-container.dragging{cursor:grabbing;transform:scale(1.05)}.knob-container.disabled,.knob-container.readonly{cursor:not-allowed;opacity:0.5}.knob-svg{display:block;overflow:visible}.value-arc{filter:drop-shadow(0 2px 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3));transition:stroke 0.2s ease}.knob-container:hover:not(.disabled):not(.readonly) .value-arc{filter:drop-shadow(0 3px 6px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4))}.center-dot{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))}.indicator{transition:all 0.1s ease;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))}.value-label{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;align-items:baseline;gap:2px;pointer-events:none;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}.value-number{font-size:calc(var(--knob-size, 120px) * 0.2);font-weight:700;color:var(--text-primary, #1e293b);line-height:1}.value-suffix{font-size:calc(var(--knob-size, 120px) * 0.12);font-weight:600;color:var(--text-muted, #64748b);line-height:1}.min-max-labels{display:flex;justify-content:space-between;width:100%;font-size:12px;color:var(--text-muted, #64748b);font-weight:500;padding:0 8px}.min-label,.max-label{white-space:nowrap}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.8}}.knob-container.dragging .value-label{animation:pulse 0.3s ease-in-out}.knob-container:active:not(.disabled):not(.readonly){transform:scale(1.05)}.knob-container:focus-visible{outline:2px solid var(--color-primary, #10b981);outline-offset:4px;border-radius:50%}@media (max-width: 640px){.value-number{font-size:calc(var(--knob-size, 120px) * 0.18)}.value-suffix{font-size:calc(var(--knob-size, 120px) * 0.11)}.min-max-labels{font-size:11px}}'}},[833,"ui-knob",{name:[1],value:[1026],min:[2],max:[2],step:[2],size:[2],strokeWidth:[2,"stroke-width"],color:[1],trackColor:[1,"track-color"],gradient:[4],showValue:[4,"show-value"],valueSuffix:[1,"value-suffix"],showMinMax:[4,"show-min-max"],disabled:[4],readonly:[4],startAngle:[2,"start-angle"],endAngle:[2,"end-angle"],enableWheel:[4,"enable-wheel"],showTicks:[4,"show-ticks"],tickCount:[2,"tick-count"],tickColor:[1,"tick-color"],tickLength:[2,"tick-length"],showLabels:[4,"show-labels"],snap:[4],allowInput:[4,"allow-input"],isDragging:[32],angle:[32],isEditing:[32],gradientId:[32]},void 0,{value:[{valueChanged:0}],color:[{colorChanged:0}],tickCount:[{propsChanged:0}],tickLength:[{propsChanged:0}],showTicks:[{propsChanged:0}]}]),d=c,u=function(){"undefined"!=typeof customElements&&["ui-knob","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((t=>{switch(t){case"ui-knob":customElements.get(a(t))||customElements.define(a(t),c);break;case"ui-badge":customElements.get(a(t))||o();break;case"ui-button":customElements.get(a(t))||n();break;case"ui-icon":customElements.get(a(t))||h();break;case"ui-input":customElements.get(a(t))||r();break;case"ui-loader":customElements.get(a(t))||l()}}))};export{d as UiKnob,u as defineCustomElement}

package/dist/components/{ui-input-pair.d.ts → ui-label.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface UiInputPair extends Components.UiInputPair, HTMLElement {}
-export const UiInputPair: {
-    prototype: UiInputPair;
-    new (): UiInputPair;
+interface UiLabel extends Components.UiLabel, HTMLElement {}
+export const UiLabel: {
+    prototype: UiLabel;
+    new (): UiLabel;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/ui-label.js

@@ -0,0 +1 @@
+import{proxyCustomElement as e,HTMLElement as l,createEvent as t,h as i,Host as a,transformTag as o}from"@stencil/core/internal/client";const r=e(class extends l{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.labelClick=t(this,"labelClick",7),this.labelFocus=t(this,"labelFocus",7),this.labelBlur=t(this,"labelBlur",7),this.labelCopy=t(this,"labelCopy",7)}get el(){return this}_isFocused=!1;_tooltipOpen=!1;htmlFor;controlId;target;label="";size="md";weight="medium";transform="none";truncate=!1;multiline=!1;lineClamp=0;variant="default";required=!1;optional=!1;disabled=!1;readonly=!1;invalid=!1;focused=!1;loading=!1;errorText="";successText="";helperText="";ariaLabel="";ariaDescribedby="";ariaLive="off";orientation="vertical";align="start";inline=!1;block=!1;gap="";margin="";padding="";startIcon="";endIcon="";iconOnly=!1;tooltipIcon="ⓘ";tooltip="";tooltipPosition="top";clickable=!1;selectable=!1;copyable=!1;responsive=!1;mobileStack=!1;labelDir="ltr";labelLang="";labelId="";name="";testId="";automationId="";labelClick;labelFocus;labelBlur;labelCopy;onFocusedChanged(e){this._isFocused=e}componentWillLoad(){this._isFocused=this.focused,this.labelId||(this.labelId="ui-label-"+Math.random().toString(36).slice(2,9))}async setFocus(){this.el.shadowRoot?.querySelector(".label-root")?.focus()}async copyText(){await this._handleCopy()}get _forId(){return this.controlId||this.htmlFor||this.target||void 0}get _describedBy(){const e=[];return this.ariaDescribedby&&e.push(this.ariaDescribedby),this.helperText&&e.push(this.labelId+"-hint"),this.invalid&&this.errorText&&e.push(this.labelId+"-error"),this.successText&&!this.invalid&&e.push(this.labelId+"-success"),e.join(" ")}get _text(){return this.label||""}_handleClick=e=>{this.disabled||this.labelClick.emit({originalEvent:e,text:this._text||this.el.textContent?.trim()||"",targetId:this._forId})};_handleFocus=()=>{this._isFocused=!0,this.labelFocus.emit()};_handleBlur=()=>{this._isFocused=!1,this.labelBlur.emit()};_handleCopy=async()=>{const e=this._text||this.el.textContent?.trim()||"";if(e)try{await navigator.clipboard.writeText(e),this.labelCopy.emit({text:e})}catch{}};_toggleTooltip=()=>{this._tooltipOpen=!this._tooltipOpen};_closeTooltip=()=>{this._tooltipOpen=!1};_rootClasses(){return{"label-root":!0,["label-size-"+this.size]:!0,["label-weight-"+this.weight]:!0,["label-variant-"+this.variant]:!0,["label-align-"+this.align]:!0,["label-orientation-"+this.orientation]:!0,"label-truncate":this.truncate&&!this.multiline,"label-multiline":this.multiline,"label-inline":this.inline,"label-block":this.block,"label-disabled":this.disabled,"label-readonly":this.readonly,"label-invalid":this.invalid,"label-focused":this._isFocused,"label-loading":this.loading,"label-clickable":this.clickable,"label-selectable":this.selectable,"label-copyable":this.copyable,"label-icon-only":this.iconOnly,"label-responsive":this.responsive,"label-mobile-stack":this.mobileStack,"label-rtl":"rtl"===this.labelDir}}_renderRequiredIndicator(){return this.el.querySelector('[slot="required-indicator"]')?i("slot",{name:"required-indicator"}):i("span",{class:"label-required","aria-hidden":"true",title:"Required field"},"*")}_renderOptionalBadge(){return i("span",{class:"label-optional","aria-hidden":"true"},"(optional)")}_renderIcon(e,l){return i("span",{class:"label-icon label-icon-"+l,"aria-hidden":"true",innerHTML:e})}_renderTooltipTrigger(){return this.tooltip||this.el.querySelector('[slot="tooltip"]')?i("button",{type:"button",class:"label-tooltip-trigger"+(this._tooltipOpen?" is-open":""),"aria-label":"More information","aria-expanded":this._tooltipOpen?"true":"false","aria-haspopup":"true",onClick:this._toggleTooltip,onBlur:this._closeTooltip},i("span",{"aria-hidden":"true"},this.tooltipIcon)):null}_renderTooltipCallout(){return this._tooltipOpen?i("div",{role:"tooltip",class:"label-tooltip label-tooltip-"+this.tooltipPosition,id:this.labelId+"-tooltip"},this.tooltip?i("span",{class:"label-tooltip-text"},this.tooltip):i("slot",{name:"tooltip"})):null}_renderCopyButton(){return i("button",{type:"button",class:"label-copy-btn","aria-label":"Copy to clipboard",onClick:this._handleCopy,tabIndex:-1},i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",width:"14",height:"14","aria-hidden":"true"},i("rect",{x:"9",y:"9",width:"13",height:"13",rx:"2",ry:"2"}),i("path",{d:"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"})))}_renderSubText(){const e=this.invalid&&this.errorText,l=!this.invalid&&this.successText,t=!e&&!l&&this.helperText,a=!!this.el.querySelector('[slot="hint"]');return e||l||t||a?i("div",{class:"label-sub"},e&&i("span",{id:this.labelId+"-error",class:"label-error-text",role:"alert","aria-live":"assertive"},i("span",{class:"label-sub-icon","aria-hidden":"true"},"✕"),this.errorText),l&&i("span",{id:this.labelId+"-success",class:"label-success-text"},i("span",{class:"label-sub-icon","aria-hidden":"true"},"✓"),this.successText),t&&i("span",{id:this.labelId+"-hint",class:"label-hint-text"},this.helperText),a&&i("span",{id:this.labelId+"-hint",class:"label-hint-text"},i("slot",{name:"hint"}))):null}_renderLoadingSkeleton(){return i("span",{class:"label-skeleton","aria-hidden":"true"},i("span",{class:"label-skeleton-bar"}))}_hostStyle(){const e={};return this.gap&&(e["--ui-label-gap"]=this.gap),this.margin&&(e.margin=this.margin),this.padding&&(e.padding=this.padding),e}_lineClampStyle(){if(this.multiline&&this.lineClamp>0)return{"-webkit-line-clamp":this.lineClamp+"","line-clamp":this.lineClamp+"",display:"-webkit-box","-webkit-box-orient":"vertical",overflow:"hidden"}}render(){const e=this._forId,l=this._describedBy,t={class:this._rootClasses(),id:this.labelId||void 0,for:e,"aria-label":this.ariaLabel||void 0,"aria-describedby":l||void 0,"aria-live":"off"!==this.ariaLive?this.ariaLive:void 0,"aria-disabled":this.disabled?"true":void 0,"data-testid":this.testId||void 0,"data-automation-id":this.automationId||void 0,onClick:this._handleClick,onFocus:this._handleFocus,onBlur:this._handleBlur};return this.name&&(t.name=this.name),this.labelLang&&(t.lang=this.labelLang),i(a,{key:"b67618ecbef75ae6ead3a609ff206a36b11de621",dir:this.labelDir,style:this._hostStyle(),class:{"ui-label-host":!0,"is-inline":this.inline,"is-block":this.block}},i("label",{key:"dc257dd21c76648e75c1e14204668a19e1baf662",...t},i("slot",{key:"c6932b813c6b1f83ea7e56101214cc7c55405fae",name:"start"}),this.startIcon&&!this.iconOnly&&this._renderIcon(this.startIcon,"start"),i("span",{key:"30a20e30976ba791ebcf4f0644c3ebf0987970a6",class:"label-text",style:this._lineClampStyle()},this.loading?this._renderLoadingSkeleton():i("span",{class:this.iconOnly?"visually-hidden":void 0},this._text,i("slot",null))),this.required&&!this.disabled&&this._renderRequiredIndicator(),this.optional&&!this.required&&this._renderOptionalBadge(),this.endIcon&&this._renderIcon(this.endIcon,"end"),i("slot",{key:"2ac12fa6019e520ad11ceead3d3f1b08dd29482d",name:"end"}),this._renderTooltipTrigger(),this.copyable&&this._renderCopyButton()),this._renderTooltipCallout(),this._renderSubText())}static get watchers(){return{focused:[{onFocusedChanged: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:block;--ui-label-color:var(--label-color, var(--text-primary, #0f172a));--ui-label-muted-color:var(--label-subtitle-color, var(--text-secondary, #64748b));--ui-label-primary-color:var(--color-primary, #22c55e);--ui-label-secondary-color:var(--text-secondary, #64748b);--ui-label-success-color:var(--color-success, #10b981);--ui-label-warning-color:var(--color-warning, #f59e0b);--ui-label-danger-color:var(--color-danger, #ef4444);--ui-label-info-color:var(--color-info, #3b82f6);--ui-label-font-size:0.875rem;--ui-label-font-weight:500;--ui-label-line-height:1.4;--ui-label-letter-spacing:0;--ui-label-gap:4px;--ui-label-icon-gap:6px;--ui-label-tooltip-gap:6px;--ui-label-required-color:var(--color-danger, #ef4444);--ui-label-required-font-size:0.875em;--ui-label-disabled-opacity:0.45;--ui-label-error-color:var(--color-danger, #ef4444);--ui-label-success-color-msg:var(--color-success, #10b981);--ui-label-hint-color:var(--label-subtitle-color, var(--text-muted, #94a3b8));--ui-label-skeleton-bg:var(--border-default, #e2e8f0);--ui-label-skeleton-shine:var(--bg-primary, #f8fafc);--ui-label-tooltip-bg:var(--bg-primary, #1e293b);--ui-label-tooltip-color:var(--text-primary, #f8fafc);--ui-label-tooltip-radius:8px;--ui-label-tooltip-shadow:0 4px 16px rgba(0, 0, 0, 0.15);--ui-label-copy-color:var(--text-muted, #94a3b8);--ui-label-copy-hover-color:var(--color-primary, #22c55e)}:host-context(.dark),:host-context([data-theme=dark]),:host-context([data-theme=violet]),:host-context([data-theme=pink]),:host-context([data-theme=blue]),:host-context([data-theme=green]){--ui-label-color:var(--label-color, #f1f5f9);--ui-label-muted-color:var(--label-subtitle-color, #94a3b8);--ui-label-hint-color:var(--label-subtitle-color, #94a3b8);--ui-label-skeleton-bg:var(--border-default, #334155);--ui-label-skeleton-shine:var(--bg-secondary, #1e293b)}:host(.is-inline){display:inline}:host(.is-block){display:block;width:100%}.label-root{display:inline-flex;align-items:center;gap:var(--ui-label-icon-gap);color:var(--ui-label-color);font-size:var(--ui-label-font-size);font-weight:var(--ui-label-font-weight);line-height:var(--ui-label-line-height);letter-spacing:var(--ui-label-letter-spacing);cursor:default;user-select:none;white-space:nowrap;box-sizing:border-box;max-width:100%;position:relative;margin:0}.label-align-start{justify-content:flex-start}.label-align-center{justify-content:center}.label-align-end{justify-content:flex-end}.label-align-between{justify-content:space-between;width:100%}.label-orientation-vertical{flex-direction:row}.label-orientation-horizontal{flex-direction:row}.label-size-xxs{--ui-label-font-size:0.5rem}.label-size-xs{--ui-label-font-size:0.625rem}.label-size-sm{--ui-label-font-size:0.75rem}.label-size-md{--ui-label-font-size:0.875rem}.label-size-lg{--ui-label-font-size:1rem}.label-size-xl{--ui-label-font-size:1.125rem}.label-size-xxl{--ui-label-font-size:1.25rem}.label-size-xxxl{--ui-label-font-size:1.5rem}.label-size-jumbo{--ui-label-font-size:2rem}.label-weight-light{--ui-label-font-weight:300}.label-weight-normal{--ui-label-font-weight:400}.label-weight-medium{--ui-label-font-weight:500}.label-weight-semibold{--ui-label-font-weight:600}.label-weight-bold{--ui-label-font-weight:700}.label-variant-default{color:var(--ui-label-color)}.label-variant-muted{color:var(--ui-label-muted-color)}.label-variant-primary{color:var(--ui-label-primary-color)}.label-variant-secondary{color:var(--ui-label-secondary-color)}.label-variant-success{color:var(--ui-label-success-color)}.label-variant-warning{color:var(--ui-label-warning-color)}.label-variant-danger{color:var(--ui-label-danger-color)}.label-variant-info{color:var(--ui-label-info-color)}.label-truncate .label-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}.label-multiline{white-space:normal}.label-multiline .label-text{white-space:normal}.label-root.label-block,.label-root.label-align-between{display:flex;width:100%}.label-inline{display:inline-flex}.label-text{flex:1 1 auto;min-width:0}.label-icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:1em;color:inherit;opacity:0.7}.label-icon-start{order:-1}.label-icon-end{order:1}.label-required{color:var(--ui-label-required-color);font-size:var(--ui-label-required-font-size);font-weight:700;margin-inline-start:2px;line-height:1;flex-shrink:0;cursor:default}.label-optional{font-size:0.75em;font-weight:400;color:var(--ui-label-muted-color);margin-inline-start:4px;flex-shrink:0}.label-selectable{user-select:text;cursor:text}.label-clickable{cursor:pointer;transition:color 0.2s ease, opacity 0.2s ease}.label-clickable:hover{color:var(--ui-label-primary-color);text-decoration:underline;text-decoration-skip-ink:auto}.label-clickable:active{opacity:0.8}.label-root:focus-visible{outline:2px solid var(--ui-label-primary-color);outline-offset:2px;border-radius:2px}.label-disabled{opacity:var(--ui-label-disabled-opacity);pointer-events:none;cursor:not-allowed}.label-readonly{opacity:0.75;cursor:default}.label-invalid{color:var(--ui-label-error-color)}.label-invalid .label-required{color:var(--ui-label-error-color)}.label-focused{color:var(--ui-label-primary-color)}.label-icon-only .label-text .visually-hidden{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}.label-skeleton{display:inline-block;width:8em;line-height:inherit;vertical-align:middle}.label-skeleton-bar{display:block;height:0.9em;border-radius:4px;background:var(--ui-label-skeleton-bg);position:relative;overflow:hidden}.label-skeleton-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent 0%, var(--ui-label-skeleton-shine) 50%, transparent 100%);animation:label-shimmer 1.4s ease-in-out infinite}@keyframes label-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.label-tooltip-trigger{background:transparent;border:none;padding:0;margin:0;margin-inline-start:var(--ui-label-tooltip-gap);cursor:pointer;font-size:0.9em;color:var(--ui-label-muted-color);line-height:1;display:inline-flex;align-items:center;border-radius:50%;flex-shrink:0;transition:color 0.2s ease}.label-tooltip-trigger:hover,.label-tooltip-trigger.is-open{color:var(--ui-label-primary-color)}.label-tooltip-trigger:focus-visible{outline:2px solid var(--ui-label-primary-color);outline-offset:2px}.label-tooltip{position:absolute;z-index:100;background:var(--ui-label-tooltip-bg);color:var(--ui-label-tooltip-color);padding:8px 12px;border-radius:var(--ui-label-tooltip-radius);font-size:0.75rem;font-weight:400;line-height:1.4;max-width:240px;white-space:normal;pointer-events:none;box-shadow:var(--ui-label-tooltip-shadow);animation:label-tooltip-in 0.15s ease}@keyframes label-tooltip-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}.label-tooltip-top{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}.label-tooltip-top::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ui-label-tooltip-bg)}.label-tooltip-bottom{top:calc(100% + 8px);left:50%;transform:translateX(-50%)}.label-tooltip-bottom::after{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:var(--ui-label-tooltip-bg)}.label-tooltip-left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}.label-tooltip-left::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:var(--ui-label-tooltip-bg)}.label-tooltip-right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.label-tooltip-right::after{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--ui-label-tooltip-bg)}.label-copy-btn{background:transparent;border:none;padding:2px;margin:0;margin-inline-start:4px;cursor:pointer;color:var(--ui-label-copy-color);display:inline-flex;align-items:center;border-radius:3px;opacity:0;transition:opacity 0.2s ease, color 0.2s ease;flex-shrink:0}.label-copy-btn:hover{color:var(--ui-label-copy-hover-color)}.label-copy-btn:focus-visible{outline:2px solid var(--ui-label-primary-color);outline-offset:2px;opacity:1}.label-copyable:hover .label-copy-btn,.label-copyable:focus-within .label-copy-btn{opacity:1}.label-sub{margin-top:var(--ui-label-gap);display:flex;flex-direction:column;gap:2px}.label-hint-text{font-size:0.75rem;font-weight:400;color:var(--ui-label-hint-color);line-height:1.4}.label-error-text{font-size:0.75rem;font-weight:500;color:var(--ui-label-error-color);line-height:1.4;display:flex;align-items:center;gap:4px}.label-success-text{font-size:0.75rem;font-weight:500;color:var(--ui-label-success-color-msg);line-height:1.4;display:flex;align-items:center;gap:4px}.label-sub-icon{flex-shrink:0;font-style:normal;font-size:0.9em}.label-responsive{--ui-label-font-size:clamp(0.75rem, 0.5rem + 0.5vw, 1rem)}@media (max-width: 640px){.label-mobile-stack{flex-direction:column;align-items:flex-start;gap:4px}}.label-rtl,:host([dir=rtl]) .label-root{direction:rtl}.label-rtl .label-icon-start,:host([dir=rtl]) .label-root .label-icon-start{order:1}.label-rtl .label-icon-end,:host([dir=rtl]) .label-root .label-icon-end{order:-1}@media (forced-colors: active){.label-root{forced-color-adjust:auto}.label-required{color:LinkText}.label-error-text{color:Mark}.label-disabled{opacity:1;color:GrayText}}'}},[769,"ui-label",{htmlFor:[1,"html-for"],controlId:[1,"control-id"],target:[1],label:[1],size:[1],weight:[1],transform:[1],truncate:[4],multiline:[4],lineClamp:[2,"line-clamp"],variant:[1],required:[4],optional:[4],disabled:[4],readonly:[4],invalid:[4],focused:[4],loading:[4],errorText:[1,"error-text"],successText:[1,"success-text"],helperText:[1,"helper-text"],ariaLabel:[1,"aria-label"],ariaDescribedby:[1,"aria-describedby"],ariaLive:[1,"aria-live"],orientation:[1],align:[1],inline:[4],block:[4],gap:[1],margin:[1],padding:[1],startIcon:[1,"start-icon"],endIcon:[1,"end-icon"],iconOnly:[4,"icon-only"],tooltipIcon:[1,"tooltip-icon"],tooltip:[1],tooltipPosition:[1,"tooltip-position"],clickable:[4],selectable:[4],copyable:[4],responsive:[4],mobileStack:[4,"mobile-stack"],labelDir:[1,"dir"],labelLang:[1,"lang"],labelId:[513,"label-id"],name:[1],testId:[1,"test-id"],automationId:[1,"automation-id"],_isFocused:[32],_tooltipOpen:[32],setFocus:[64],copyText:[64]},void 0,{focused:[{onFocusedChanged:0}]}]),n=r,s=function(){"undefined"!=typeof customElements&&["ui-label"].forEach((e=>{"ui-label"===e&&(customElements.get(o(e))||customElements.define(o(e),r))}))};export{n as UiLabel,s as defineCustomElement}

package/dist/components/ui-library.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as a,h as t,Host as o,transformTag as i}from"@stencil/core/internal/client";import{d as r}from"./category-section2.js";import{d as n}from"./library-card2.js";import{d as c,a as d}from"./badge.js";import{d as s}from"./icon.js";import{d as p}from"./input.js";const l=[{id:"accordion",name:"Accordion",description:"Expandable/collapsible content",icon:"📑",category:"Foundation & Layout",docs:"/docs/index.html?page=accordion"},{id:"aside-panel",name:"Aside Panel",description:"Side content panel",icon:"📱",category:"Foundation & Layout",docs:"/docs/index.html?page=aside-panel"},{id:"card",name:"Card",description:"Content container",icon:"🃏",category:"Foundation & Layout",docs:"/docs/index.html?page=card"},{id:"divider",name:"Divider",description:"Content separator",icon:"➖",category:"Foundation & Layout",docs:"/docs/index.html?page=divider"},{id:"dock",name:"Dock",description:"Docking layout",icon:"🚢",category:"Foundation & Layout",docs:"/docs/index.html?page=dock"},{id:"dock-host",name:"Dock Host",description:"Host for dockable components",icon:"🗂️",category:"Foundation & Layout",docs:"/docs/index.html?page=dock-host"},{id:"layout-manager",name:"Layout Manager",description:"Manage complex layouts",icon:"🏗️",category:"Foundation & Layout",docs:"/docs/index.html?page=layout-manager"},{id:"panel",name:"Panel",description:"Content panel",icon:"📋",category:"Foundation & Layout",docs:"/docs/index.html?page=panel"},{id:"stack",name:"Stack",description:"Vertical/Horizontal stack",icon:"📚",category:"Foundation & Layout",docs:"/docs/index.html?page=stack"},{id:"anchor",name:"Anchor",description:"Anchor link navigation",icon:"⚓",category:"Navigation",docs:"/docs/index.html?page=anchor"},{id:"breadcrumb",name:"Breadcrumb",description:"Indicate current page location",icon:"🍞",category:"Navigation",docs:"/docs/index.html?page=breadcrumb"},{id:"context-menu",name:"Context Menu",description:"Right-click context menu",icon:"📋",category:"Navigation",docs:"/docs/index.html?page=context-menu"},{id:"horizontal-nav",name:"Horizontal Nav",description:"Horizontal navigation menu",icon:"↔️",category:"Navigation",docs:"/docs/index.html?page=horizontal-nav"},{id:"nav-bar",name:"Nav Bar",description:"Navigation bar",icon:"🧭",category:"Navigation",docs:"/docs/index.html?page=nav-bar"},{id:"pagination",name:"Pagination",description:"Navigate through pages of data",icon:"📄",category:"Navigation",docs:"/docs/index.html?page=pagination"},{id:"scroll-top",name:"Scroll Top",description:"Button to scroll to top",icon:"⬆️",category:"Navigation",docs:"/docs/index.html?page=scroll-top"},{id:"smart-menu",name:"Smart Menu",description:"Intelligent menu component",icon:"🧠",category:"Navigation",docs:"/docs/index.html?page=smart-menu"},{id:"smart-stepper",name:"Smart Stepper",description:"Intelligent stepper wizard",icon:"🧠",category:"Navigation",docs:"/docs/index.html?page=smart-stepper"},{id:"speed-dial",name:"Speed Dial",description:"Floating action button speed dial",icon:"⚡",category:"Navigation",docs:"/docs/index.html?page=speed-dial"},{id:"stepper",name:"Stepper",description:"Step-by-step wizard",icon:"👣",category:"Navigation",docs:"/docs/index.html?page=stepper"},{id:"tabs",name:"Tabs",description:"Tabbed content navigation",icon:"📑",category:"Navigation",docs:"/docs/index.html?page=tabs"},{id:"top-bar",name:"Top Bar",description:"Top navigation bar",icon:"📌",category:"Navigation",docs:"/docs/index.html?page=top-bar"},{id:"button",name:"Button",description:"Clickable button element",icon:"🔘",category:"Inputs & Forms",docs:"/docs/index.html?page=button"},{id:"button-group",name:"Button Group",description:"Layout container for buttons",icon:"🍱",category:"Inputs & Forms",docs:"/docs/index.html?page=button-group"},{id:"cascade-select",name:"Cascade Select",description:"Hierarchical selection",icon:"🔽",category:"Inputs & Forms",docs:"/docs/index.html?page=cascade-select"},{id:"dropdown",name:"Dropdown",description:"Select hidden items from a list",icon:"📋",category:"Inputs & Forms",docs:"/docs/index.html?page=dropdown"},{id:"knob",name:"Knob",description:"Rotary control knob",icon:"🎛️",category:"Inputs & Forms",docs:"/docs/index.html?page=knob"},{id:"pattern-input",name:"Pattern Input",description:"Input with pattern validation",icon:"🎯",category:"Inputs & Forms",docs:"/docs/index.html?page=pattern-input"},{id:"picklist",name:"Picklist",description:"List for selecting multiple items",icon:"📋",category:"Inputs & Forms",docs:"/docs/index.html?page=picklist"},{id:"range-slider",name:"Range Slider",description:"Slider for range selection",icon:"🎚️",category:"Inputs & Forms",docs:"/docs/index.html?page=range-slider"},{id:"rating",name:"Rating",description:"Star rating control",icon:"⭐",category:"Inputs & Forms",docs:"/docs/index.html?page=rating"},{id:"switch",name:"Switch",description:"Toggle switch control",icon:"🔘",category:"Inputs & Forms",docs:"/docs/index.html?page=switch"},{id:"transfer-list",name:"Transfer List",description:"Move items between lists",icon:"⇄",category:"Inputs & Forms",docs:"/docs/index.html?page=transfer-list"},{id:"advanced-data-table",name:"Advanced Table",description:"Data table with advanced features",icon:"📊",category:"Data Display",docs:"/docs/index.html?page=advanced-data-table"},{id:"avatar",name:"Avatar",description:"User profile image",icon:"👤",category:"Data Display",docs:"/docs/index.html?page=avatar"},{id:"avatar-group",name:"Avatar Group",description:"Group of avatars",icon:"👥",category:"Data Display",docs:"/docs/index.html?page=avatar-group"},{id:"badge",name:"Badge",description:"Notification badge",icon:"🔔",category:"Data Display",docs:"/docs/index.html?page=badge"},{id:"bar-chart",name:"Bar Chart",description:"Bar chart visualization",icon:"📊",category:"Data Display",docs:"/docs/index.html?page=bar-chart"},{id:"chart",name:"Chart",description:"General chart component",icon:"📈",category:"Data Display",docs:"/docs/index.html?page=chart"},{id:"chip",name:"Chip",description:"Compact element for input, attribute, or action",icon:"🏷️",category:"Data Display",docs:"/docs/index.html?page=chip"},{id:"meter-group",name:"Meter",description:"Visual meter display",icon:"📊",category:"Data Display",docs:"/docs/index.html?page=meter-group"},{id:"pill",name:"Pill",description:"Rounded status indicator",icon:"💊",category:"Data Display",docs:"/docs/index.html?page=pill"},{id:"speedometer",name:"Speedometer",description:"Speedometer gauge",icon:"🎯",category:"Data Display",docs:"/docs/index.html?page=speedometer"},{id:"tag",name:"Tag",description:"Label for clear categorization",icon:"🏷",category:"Data Display",docs:"/docs/index.html?page=tag"},{id:"timeline",name:"Timeline",description:"Events in chronological order",icon:"⏱️",category:"Data Display",docs:"/docs/index.html?page=timeline"},{id:"tree-list",name:"Tree List",description:"Hierarchical tree view",icon:"🌳",category:"Data Display",docs:"/docs/index.html?page=tree-list"},{id:"dialog",name:"Dialog",description:"Modal dialog box",icon:"💬",category:"Feedback & Overlays",docs:"/docs/index.html?page=dialog"},{id:"popover",name:"Popover",description:"Pop-up content",icon:"💭",category:"Feedback & Overlays",docs:"/docs/index.html?page=popover"},{id:"skeleton",name:"Skeleton",description:"Loading state placeholder",icon:"💀",category:"Feedback & Overlays",docs:"/docs/index.html?page=skeleton"},{id:"snackbar",name:"Snackbar",description:"Brief feedback message",icon:"🍞",category:"Feedback & Overlays",docs:"/docs/index.html?page=snackbar"},{id:"loader",name:"Loader",description:"Advanced loading indicators",icon:"🔄",category:"Feedback & Overlays",docs:"/docs/index.html?page=loader"},{id:"timer",name:"Timer",description:"Countdown or stopwatch",icon:"⏱️",category:"Feedback & Overlays",docs:"/docs/index.html?page=timer"}],g=["Foundation & Layout","Navigation","Inputs & Forms","Data Display","Feedback & Overlays"],m=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}searchQuery="";selectedCategory=null;mode="demo";getCategoryIcon(e){return{"Foundation & Layout":"🏗️",Navigation:"🧭","Inputs & Forms":"🎮","Data Display":"📊","Feedback & Overlays":"💬",Settings:"⚙️",About:"ℹ️"}[e]||"📦"}getFilteredComponents(){const e={},a=this.searchQuery.toLowerCase();for(const t of g){if(this.selectedCategory&&this.selectedCategory!==t)continue;const o=l.filter((e=>e.category===t&&(!a||e.name.toLowerCase().includes(a)||e.description.toLowerCase().includes(a)||e.id.toLowerCase().includes(a))));o.length>0&&(e[t]=o)}return e}handleCategoryClick=e=>{this.selectedCategory=this.selectedCategory===e?null:e};render(){const e=this.getFilteredComponents(),a=l.length;return t(o,{key:"beac989569c0ca806ae655da242ec9904445d39f"},t("div",{key:"959612c2d98c7daca8a4ac1f35cf3df93ae7b2c7",class:"library-container"},t("header",{key:"27e8009daad08c4b07d52e64881c29b87e3b9c40",class:"library-header"},t("div",{key:"b07dcdd2b87367c4c2d83f00b0a739e3b3713c7a",class:"header-content"},t("div",{key:"da37733ca7ee6888845f17acc3636efa8119300c",class:"logo-section"},t("div",{key:"f621cc915750bcf3ede6518baa6aceb6ca8d39a5",class:"logo"},t("span",{key:"bd201dccfd00236e31789149190244b08d38a005",class:"logo-icon"},"🎨"),t("span",{key:"eb94d775fce9a5d47127b19eb5d512857cfb0de0",class:"logo-text"},"App UI")),t("span",{key:"225b246368e5e6fe765387ed2d03fdb3722fe463",class:"version-badge"},"v0.1.0")),t("div",{key:"961bed93bdb2e56ec60b1dae9a5389c1a75e067f",class:"search-container"},t("ui-input",{key:"feda70660a055323076630917b0e7a49afcb0a8a",class:"search-input",placeholder:"Search components...",value:this.searchQuery,onInputChange:e=>this.searchQuery=e.detail,"prefix-icon":"search","icon-library":"lucide",clearable:!0})),t("div",{key:"592f3d4fe0f19a5bc1a33f8cd6ffc2f98766b13c",class:"header-stats"},t("span",{key:"edfe4fe44fc73aa922883f30ee2c50abcd407aa0",class:"stat"},a," components"),t("span",{key:"1271653612b2d1e56327e4eb043ef1848be9e7ae",class:"stat"},g.length," categories")))),t("nav",{key:"d5e1be2e568e66c317362e85baa4f8b184b2ad05",class:"category-nav"},t("ui-button",{key:"a43178b8702bda6441c706d7b27d7d5268b1017e",label:"All",variant:null===this.selectedCategory?"filled":"ghost",color:"primary",size:"md",onClick:()=>this.handleCategoryClick(null),style:{borderRadius:"20px"}}),g.map((e=>t("ui-button",{key:e,label:`${this.getCategoryIcon(e)} ${e}`,variant:this.selectedCategory===e?"filled":"ghost",color:"primary",size:"md",onClick:()=>this.handleCategoryClick(e),style:{borderRadius:"20px"}})))),t("main",{key:"011117cd9c223602cc8dc11af1f8a058b8b25a5a",class:"library-content"},0===Object.keys(e).length?t("div",{class:"no-results"},t("ui-icon",{name:"search",library:"lucide",size:"2em",class:"no-results-icon"}),t("h3",null,"No components found"),t("p",null,"Try adjusting your search or filter criteria")):Object.entries(e).map((([e,a])=>t("category-section",{key:e,"category-name":e,"category-icon":this.getCategoryIcon(e),components:a,mode:this.mode})))),t("footer",{key:"fd993854e47f108c29bda48371866c5ab43935a5",class:"library-footer"},t("p",{key:"78fbe5d2283722f32297cc99446e37b8b366d045"},"Built with ❤️ using Stencil.js"),t("div",{key:"0be6641e6a4f57e02a0070311eceeab0fff6136a",class:"footer-links"},t("a",{key:"e166e252d8367239b62ab1904cddef9425dcb7c1",href:"#",class:"footer-link"},"Documentation"),t("a",{key:"fdcd853536091767eefcdc8d28a231972f573a51",href:"#",class:"footer-link"},"GitHub"),t("a",{key:"a8d34f3e11ed0aa47aa82f074530d774f6982635",href:"#",class:"footer-link"},"Changelog")))))}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;font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--primary:#6366f1;--primary-light:#818cf8;--bg-dark:#0f172a;--bg-card:rgba(30, 41, 59, 0.6);--text-primary:#f1f5f9;--text-secondary:#94a3b8;--border:rgba(255, 255, 255, 0.08);--header-bg:rgba(15, 23, 42, 0.85);--input-bg:rgba(255, 255, 255, 0.05)}:host-context([data-theme=light]),:host-context(.light),html[data-theme=light] :host{--bg-dark:#f8fafc;--bg-card:#ffffff;--text-primary:#1e293b;--text-secondary:#64748b;--border:#e2e8f0;--header-bg:rgba(255, 255, 255, 0.85);--input-bg:rgba(0, 0, 0, 0.04)}:host-context([data-theme=green]),:host-context(.green),html[data-theme=green] :host{--primary:#22c55e;--primary-light:#86efac;--bg-dark:#052e16;--bg-card:rgba(20, 83, 45, 0.6);--text-primary:#f0fdf4;--text-secondary:#86efac;--border:rgba(34, 197, 94, 0.2);--header-bg:rgba(5, 46, 22, 0.85);--input-bg:rgba(255, 255, 255, 0.1)}.library-container{min-height:100vh;background:linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);background-attachment:fixed;color:var(--text-primary)}.library-header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:16px 32px}.header-content{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:32px;flex-wrap:wrap}.logo-section{display:flex;align-items:center;gap:12px}.logo{display:flex;align-items:center;gap:10px}.logo-icon{font-size:2rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.logo-text{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg, #6366f1, #a855f7, #ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.version-badge{font-size:0.7rem;font-weight:600;padding:4px 10px;background:rgba(99, 102, 241, 0.2);color:#a5b4fc;border-radius:20px;border:1px solid rgba(99, 102, 241, 0.3)}.search-container{flex:1;max-width:500px;position:relative}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-secondary)}.search-input{width:100%;padding:14px 48px;background:var(--input-bg);border:1px solid var(--border);border-radius:16px;color:var(--text-primary);font-size:1rem;font-family:inherit;transition:all 0.3s ease}.search-input::placeholder{color:var(--text-secondary)}.search-input:focus{outline:none;border-color:var(--primary);background:rgba(99, 102, 241, 0.08);box-shadow:0 0 0 4px rgba(99, 102, 241, 0.15)}.clear-search{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:rgba(255, 255, 255, 0.1);border:none;color:var(--text-secondary);width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.75rem;transition:all 0.2s ease}.clear-search:hover{background:rgba(239, 68, 68, 0.3);color:#fca5a5}.header-stats{display:flex;gap:20px;flex-shrink:0;margin-left:auto}.stat{font-size:0.85rem;color:var(--text-secondary);padding:8px 16px;background:rgba(255, 255, 255, 0.03);border-radius:10px;white-space:nowrap}.category-nav{max-width:1400px;margin:0 auto;padding:24px 32px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.category-pill{padding:10px 20px;background:rgba(255, 255, 255, 0.05);border:1px solid var(--border);border-radius:30px;color:var(--text-secondary);font-size:0.9rem;font-weight:500;font-family:inherit;cursor:pointer;transition:all 0.3s ease;white-space:nowrap}.category-pill:hover{background:rgba(99, 102, 241, 0.15);border-color:rgba(99, 102, 241, 0.3);color:var(--text-primary);transform:translateY(-2px)}.category-pill.active{background:linear-gradient(135deg, #10b981 0%, #047857 100%);border-color:transparent;color:white;box-shadow:0 4px 15px rgba(16, 185, 129, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);font-weight:600}.category-pill.active:hover{transform:translateY(-2px)}.library-content{max-width:1400px;margin:0 auto;padding:0 32px 48px}.no-results{text-align:center;padding:80px 20px;color:var(--text-secondary)}.no-results-icon{font-size:4rem;display:block;margin-bottom:16px;opacity:0.5}.no-results h3{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0 0 8px 0}.no-results p{margin:0;font-size:1rem}.library-footer{max-width:1400px;margin:0 auto;padding:32px;text-align:center;border-top:1px solid var(--border)}.library-footer p{margin:0 0 16px 0;color:var(--text-secondary);font-size:0.9rem}.footer-links{display:flex;justify-content:center;gap:24px}.footer-link{color:var(--primary-light);text-decoration:none;font-size:0.9rem;font-weight:500;transition:color 0.2s ease}.footer-link:hover{color:#a5b4fc}@media (max-width: 768px){.library-header{padding:12px 16px}.header-content{flex-wrap:wrap;gap:16px}.logo-section{flex:1}.search-container{order:3;flex:100%;max-width:none}.header-stats{display:none}.category-nav{padding:16px;gap:8px}.category-pill{padding:8px 14px;font-size:0.8rem}.library-content{padding:0 16px 32px}}'}},[513,"ui-library",{mode:[1],searchQuery:[32],selectedCategory:[32]}]),b=m,y=function(){"undefined"!=typeof customElements&&["ui-library","category-section","library-card","ui-badge","ui-button","ui-icon","ui-input"].forEach((e=>{switch(e){case"ui-library":customElements.get(i(e))||customElements.define(i(e),m);break;case"category-section":customElements.get(i(e))||r();break;case"library-card":customElements.get(i(e))||n();break;case"ui-badge":customElements.get(i(e))||d();break;case"ui-button":customElements.get(i(e))||c();break;case"ui-icon":customElements.get(i(e))||s();break;case"ui-input":customElements.get(i(e))||p()}}))};export{b as UiLibrary,y as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as a,h as t,Host as o,transformTag as i}from"@stencil/core/internal/client";import{d as r}from"./category-section2.js";import{d as n}from"./library-card2.js";import{d as c}from"./badge.js";import{d}from"./button.js";import{d as s}from"./icon.js";import{d as p}from"./input.js";import{d as l}from"./loader.js";const g=[{id:"accordion",name:"Accordion",description:"Expandable/collapsible content",icon:"📑",category:"Foundation & Layout",docs:"/docs/index.html?page=accordion"},{id:"aside-panel",name:"Aside Panel",description:"Side content panel",icon:"📱",category:"Foundation & Layout",docs:"/docs/index.html?page=aside-panel"},{id:"card",name:"Card",description:"Content container",icon:"🃏",category:"Foundation & Layout",docs:"/docs/index.html?page=card"},{id:"divider",name:"Divider",description:"Content separator",icon:"➖",category:"Foundation & Layout",docs:"/docs/index.html?page=divider"},{id:"dock",name:"Dock",description:"Docking layout",icon:"🚢",category:"Foundation & Layout",docs:"/docs/index.html?page=dock"},{id:"dock-host",name:"Dock Host",description:"Host for dockable components",icon:"🗂️",category:"Foundation & Layout",docs:"/docs/index.html?page=dock-host"},{id:"layout-manager",name:"Layout Manager",description:"Manage complex layouts",icon:"🏗️",category:"Foundation & Layout",docs:"/docs/index.html?page=layout-manager"},{id:"panel",name:"Panel",description:"Content panel",icon:"📋",category:"Foundation & Layout",docs:"/docs/index.html?page=panel"},{id:"stack",name:"Stack",description:"Vertical/Horizontal stack",icon:"📚",category:"Foundation & Layout",docs:"/docs/index.html?page=stack"},{id:"anchor",name:"Anchor",description:"Anchor link navigation",icon:"⚓",category:"Navigation",docs:"/docs/index.html?page=anchor"},{id:"breadcrumb",name:"Breadcrumb",description:"Indicate current page location",icon:"🍞",category:"Navigation",docs:"/docs/index.html?page=breadcrumb"},{id:"context-menu",name:"Context Menu",description:"Right-click context menu",icon:"📋",category:"Navigation",docs:"/docs/index.html?page=context-menu"},{id:"horizontal-nav",name:"Horizontal Nav",description:"Horizontal navigation menu",icon:"↔️",category:"Navigation",docs:"/docs/index.html?page=horizontal-nav"},{id:"nav-bar",name:"Nav Bar",description:"Navigation bar",icon:"🧭",category:"Navigation",docs:"/docs/index.html?page=nav-bar"},{id:"pagination",name:"Pagination",description:"Navigate through pages of data",icon:"📄",category:"Navigation",docs:"/docs/index.html?page=pagination"},{id:"scroll-top",name:"Scroll Top",description:"Button to scroll to top",icon:"⬆️",category:"Navigation",docs:"/docs/index.html?page=scroll-top"},{id:"smart-menu",name:"Smart Menu",description:"Intelligent menu component",icon:"🧠",category:"Navigation",docs:"/docs/index.html?page=smart-menu"},{id:"smart-stepper",name:"Smart Stepper",description:"Intelligent stepper wizard",icon:"🧠",category:"Navigation",docs:"/docs/index.html?page=smart-stepper"},{id:"speed-dial",name:"Speed Dial",description:"Floating action button speed dial",icon:"⚡",category:"Navigation",docs:"/docs/index.html?page=speed-dial"},{id:"stepper",name:"Stepper",description:"Step-by-step wizard",icon:"👣",category:"Navigation",docs:"/docs/index.html?page=stepper"},{id:"tabs",name:"Tabs",description:"Tabbed content navigation",icon:"📑",category:"Navigation",docs:"/docs/index.html?page=tabs"},{id:"top-bar",name:"Top Bar",description:"Top navigation bar",icon:"📌",category:"Navigation",docs:"/docs/index.html?page=top-bar"},{id:"button",name:"Button",description:"Clickable button element",icon:"🔘",category:"Inputs & Forms",docs:"/docs/index.html?page=button"},{id:"button-group",name:"Button Group",description:"Layout container for buttons",icon:"🍱",category:"Inputs & Forms",docs:"/docs/index.html?page=button-group"},{id:"cascade-select",name:"Cascade Select",description:"Hierarchical selection",icon:"🔽",category:"Inputs & Forms",docs:"/docs/index.html?page=cascade-select"},{id:"dropdown",name:"Dropdown",description:"Select hidden items from a list",icon:"📋",category:"Inputs & Forms",docs:"/docs/index.html?page=dropdown"},{id:"knob",name:"Knob",description:"Rotary control knob",icon:"🎛️",category:"Inputs & Forms",docs:"/docs/index.html?page=knob"},{id:"pattern-input",name:"Pattern Input",description:"Input with pattern validation",icon:"🎯",category:"Inputs & Forms",docs:"/docs/index.html?page=pattern-input"},{id:"picklist",name:"Picklist",description:"List for selecting multiple items",icon:"📋",category:"Inputs & Forms",docs:"/docs/index.html?page=picklist"},{id:"range-slider",name:"Range Slider",description:"Slider for range selection",icon:"🎚️",category:"Inputs & Forms",docs:"/docs/index.html?page=range-slider"},{id:"rating",name:"Rating",description:"Star rating control",icon:"⭐",category:"Inputs & Forms",docs:"/docs/index.html?page=rating"},{id:"switch",name:"Switch",description:"Toggle switch control",icon:"🔘",category:"Inputs & Forms",docs:"/docs/index.html?page=switch"},{id:"transfer-list",name:"Transfer List",description:"Move items between lists",icon:"⇄",category:"Inputs & Forms",docs:"/docs/index.html?page=transfer-list"},{id:"advanced-data-table",name:"Advanced Table",description:"Data table with advanced features",icon:"📊",category:"Data Display",docs:"/docs/index.html?page=advanced-data-table"},{id:"avatar",name:"Avatar",description:"User profile image",icon:"👤",category:"Data Display",docs:"/docs/index.html?page=avatar"},{id:"avatar-group",name:"Avatar Group",description:"Group of avatars",icon:"👥",category:"Data Display",docs:"/docs/index.html?page=avatar-group"},{id:"badge",name:"Badge",description:"Notification badge",icon:"🔔",category:"Data Display",docs:"/docs/index.html?page=badge"},{id:"bar-chart",name:"Bar Chart",description:"Bar chart visualization",icon:"📊",category:"Data Display",docs:"/docs/index.html?page=bar-chart"},{id:"chart",name:"Chart",description:"General chart component",icon:"📈",category:"Data Display",docs:"/docs/index.html?page=chart"},{id:"chip",name:"Chip",description:"Compact element for input, attribute, or action",icon:"🏷️",category:"Data Display",docs:"/docs/index.html?page=chip"},{id:"meter-group",name:"Meter",description:"Visual meter display",icon:"📊",category:"Data Display",docs:"/docs/index.html?page=meter-group"},{id:"pill",name:"Pill",description:"Rounded status indicator",icon:"💊",category:"Data Display",docs:"/docs/index.html?page=pill"},{id:"speedometer",name:"Speedometer",description:"Speedometer gauge",icon:"🎯",category:"Data Display",docs:"/docs/index.html?page=speedometer"},{id:"tag",name:"Tag",description:"Label for clear categorization",icon:"🏷",category:"Data Display",docs:"/docs/index.html?page=tag"},{id:"timeline",name:"Timeline",description:"Events in chronological order",icon:"⏱️",category:"Data Display",docs:"/docs/index.html?page=timeline"},{id:"tree-list",name:"Tree List",description:"Hierarchical tree view",icon:"🌳",category:"Data Display",docs:"/docs/index.html?page=tree-list"},{id:"dialog",name:"Dialog",description:"Modal dialog box",icon:"💬",category:"Feedback & Overlays",docs:"/docs/index.html?page=dialog"},{id:"popover",name:"Popover",description:"Pop-up content",icon:"💭",category:"Feedback & Overlays",docs:"/docs/index.html?page=popover"},{id:"skeleton",name:"Skeleton",description:"Loading state placeholder",icon:"💀",category:"Feedback & Overlays",docs:"/docs/index.html?page=skeleton"},{id:"snackbar",name:"Snackbar",description:"Brief feedback message",icon:"🍞",category:"Feedback & Overlays",docs:"/docs/index.html?page=snackbar"},{id:"loader",name:"Loader",description:"Advanced loading indicators",icon:"🔄",category:"Feedback & Overlays",docs:"/docs/index.html?page=loader"},{id:"timer",name:"Timer",description:"Countdown or stopwatch",icon:"⏱️",category:"Feedback & Overlays",docs:"/docs/index.html?page=timer"}],m=["Foundation & Layout","Navigation","Inputs & Forms","Data Display","Feedback & Overlays"],b=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}searchQuery="";selectedCategory=null;mode="demo";getCategoryIcon(e){return{"Foundation & Layout":"🏗️",Navigation:"🧭","Inputs & Forms":"🎮","Data Display":"📊","Feedback & Overlays":"💬",Settings:"⚙️",About:"ℹ️"}[e]||"📦"}getFilteredComponents(){const e={},a=this.searchQuery.toLowerCase();for(const t of m){if(this.selectedCategory&&this.selectedCategory!==t)continue;const o=g.filter((e=>e.category===t&&(!a||e.name.toLowerCase().includes(a)||e.description.toLowerCase().includes(a)||e.id.toLowerCase().includes(a))));o.length>0&&(e[t]=o)}return e}handleCategoryClick=e=>{this.selectedCategory=this.selectedCategory===e?null:e};render(){const e=this.getFilteredComponents(),a=g.length;return t(o,{key:"7af3d689184e46c3bd02292ea4f22f5ca9945764"},t("div",{key:"f41481a5c1883d92bcb031ad2ad870fb986af516",class:"library-container"},t("header",{key:"1e8e42ce418dfff3bb91c83e14420dedffdf3cbc",class:"library-header"},t("div",{key:"49f0832b98cbe019ef9a258cbef8616efbb865e9",class:"header-content"},t("div",{key:"f7461ed7219a059a49e4049a8f17dd0b93688f05",class:"logo-section"},t("div",{key:"d4ab4bcb3909ed5a3af30ae89f0e4d58b5eb35ae",class:"logo"},t("span",{key:"9513f4ceb1723af068920240c5dd4fc99e736911",class:"logo-icon"},"🎨"),t("span",{key:"8bc28122c5e22e0f4c5f912fcd4d653065c47c16",class:"logo-text"},"App UI")),t("span",{key:"81f34ec0b03d9a5ab174c8fc7cc28b48da656c77",class:"version-badge"},"v0.1.0")),t("div",{key:"3b3ef085d16c1efbc8cfe3ccdc72b0ebc57e4666",class:"search-container"},t("ui-input",{key:"5adcc741e1ed654686012689e9a92e8f6dfc22ac",class:"search-input",placeholder:"Search components...",value:this.searchQuery,onInputChange:e=>this.searchQuery=e.detail,"prefix-icon":"search","icon-library":"lucide",clearable:!0})),t("div",{key:"61baaadd9b86a0c20c3a6b81fd1614a5089b3554",class:"header-stats"},t("span",{key:"046d0fd0c233314bb30bf75d469e5a9c496647fa",class:"stat"},a," components"),t("span",{key:"455a288e2b0553687ea61c88b6b4728bc02860dc",class:"stat"},m.length," categories")))),t("nav",{key:"2cedaba54c9a0d8dae53d8c04c82e21ac233fc9a",class:"category-nav"},t("ui-button",{key:"a20b92b2c7f5fa8366457f3a6721bfa81ee62bab",label:"All",variant:null===this.selectedCategory?"filled":"ghost",color:"primary",size:"md",onClick:()=>this.handleCategoryClick(null),style:{borderRadius:"20px"}}),m.map((e=>t("ui-button",{key:e,label:`${this.getCategoryIcon(e)} ${e}`,variant:this.selectedCategory===e?"filled":"ghost",color:"primary",size:"md",onClick:()=>this.handleCategoryClick(e),style:{borderRadius:"20px"}})))),t("main",{key:"25b1de0ed093c1bf9593c959ab6e4d69cde3f2b3",class:"library-content"},0===Object.keys(e).length?t("div",{class:"no-results"},t("ui-icon",{name:"search",library:"lucide",size:"2em",class:"no-results-icon"}),t("h3",null,"No components found"),t("p",null,"Try adjusting your search or filter criteria")):Object.entries(e).map((([e,a])=>t("category-section",{key:e,"category-name":e,"category-icon":this.getCategoryIcon(e),components:a,mode:this.mode})))),t("footer",{key:"479b967ddb3281c318b60300da1c4b9eb3976189",class:"library-footer"},t("p",{key:"f1832bdca4a507ea2f74c4332b2936a6a37b33ab"},"Built with ❤️ using Stencil.js"),t("div",{key:"f2b462bb1a0ae1133ec02a246cbfcfd27ec0d501",class:"footer-links"},t("a",{key:"0780dd9f9a59efcd69d21910551cbd2ce25eafbc",href:"#",class:"footer-link"},"Documentation"),t("a",{key:"224e2da3c34d7362ee42f8a207a9f64e556bb0bc",href:"#",class:"footer-link"},"GitHub"),t("a",{key:"82c37c06125ddafcd54246b5df31dfe213538853",href:"#",class:"footer-link"},"Changelog")))))}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;font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--primary:#6366f1;--primary-light:#818cf8;--bg-dark:#0f172a;--bg-card:rgba(30, 41, 59, 0.6);--text-primary:#f1f5f9;--text-secondary:#94a3b8;--border:rgba(255, 255, 255, 0.08);--header-bg:rgba(15, 23, 42, 0.85);--input-bg:rgba(255, 255, 255, 0.05)}:host-context([data-theme=light]),:host-context(.light),html[data-theme=light] :host{--bg-dark:#f8fafc;--bg-card:#ffffff;--text-primary:#1e293b;--text-secondary:#64748b;--border:#e2e8f0;--header-bg:rgba(255, 255, 255, 0.85);--input-bg:rgba(0, 0, 0, 0.04)}:host-context([data-theme=green]),:host-context(.green),html[data-theme=green] :host{--primary:#22c55e;--primary-light:#86efac;--bg-dark:#052e16;--bg-card:rgba(20, 83, 45, 0.6);--text-primary:#f0fdf4;--text-secondary:#86efac;--border:rgba(34, 197, 94, 0.2);--header-bg:rgba(5, 46, 22, 0.85);--input-bg:rgba(255, 255, 255, 0.1)}.library-container{min-height:100vh;background:linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);background-attachment:fixed;color:var(--text-primary)}.library-header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:16px 32px}.header-content{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:32px;flex-wrap:wrap}.logo-section{display:flex;align-items:center;gap:12px}.logo{display:flex;align-items:center;gap:10px}.logo-icon{font-size:2rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.logo-text{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg, #6366f1, #a855f7, #ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.version-badge{font-size:0.7rem;font-weight:600;padding:4px 10px;background:rgba(99, 102, 241, 0.2);color:#a5b4fc;border-radius:20px;border:1px solid rgba(99, 102, 241, 0.3)}.search-container{flex:1;max-width:500px;position:relative}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-secondary)}.search-input{width:100%;padding:14px 48px;background:var(--input-bg);border:1px solid var(--border);border-radius:16px;color:var(--text-primary);font-size:1rem;font-family:inherit;transition:all 0.3s ease}.search-input::placeholder{color:var(--text-secondary)}.search-input:focus{outline:none;border-color:var(--primary);background:rgba(99, 102, 241, 0.08);box-shadow:0 0 0 4px rgba(99, 102, 241, 0.15)}.clear-search{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:rgba(255, 255, 255, 0.1);border:none;color:var(--text-secondary);width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.75rem;transition:all 0.2s ease}.clear-search:hover{background:rgba(239, 68, 68, 0.3);color:#fca5a5}.header-stats{display:flex;gap:20px;flex-shrink:0;margin-left:auto}.stat{font-size:0.85rem;color:var(--text-secondary);padding:8px 16px;background:rgba(255, 255, 255, 0.03);border-radius:10px;white-space:nowrap}.category-nav{max-width:1400px;margin:0 auto;padding:24px 32px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.category-pill{padding:10px 20px;background:rgba(255, 255, 255, 0.05);border:1px solid var(--border);border-radius:30px;color:var(--text-secondary);font-size:0.9rem;font-weight:500;font-family:inherit;cursor:pointer;transition:all 0.3s ease;white-space:nowrap}.category-pill:hover{background:rgba(99, 102, 241, 0.15);border-color:rgba(99, 102, 241, 0.3);color:var(--text-primary);transform:translateY(-2px)}.category-pill.active{background:linear-gradient(135deg, #10b981 0%, #047857 100%);border-color:transparent;color:white;box-shadow:0 4px 15px rgba(16, 185, 129, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);font-weight:600}.category-pill.active:hover{transform:translateY(-2px)}.library-content{max-width:1400px;margin:0 auto;padding:0 32px 48px}.no-results{text-align:center;padding:80px 20px;color:var(--text-secondary)}.no-results-icon{font-size:4rem;display:block;margin-bottom:16px;opacity:0.5}.no-results h3{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0 0 8px 0}.no-results p{margin:0;font-size:1rem}.library-footer{max-width:1400px;margin:0 auto;padding:32px;text-align:center;border-top:1px solid var(--border)}.library-footer p{margin:0 0 16px 0;color:var(--text-secondary);font-size:0.9rem}.footer-links{display:flex;justify-content:center;gap:24px}.footer-link{color:var(--primary-light);text-decoration:none;font-size:0.9rem;font-weight:500;transition:color 0.2s ease}.footer-link:hover{color:#a5b4fc}@media (max-width: 768px){.library-header{padding:12px 16px}.header-content{flex-wrap:wrap;gap:16px}.logo-section{flex:1}.search-container{order:3;flex:100%;max-width:none}.header-stats{display:none}.category-nav{padding:16px;gap:8px}.category-pill{padding:8px 14px;font-size:0.8rem}.library-content{padding:0 16px 32px}}'}},[513,"ui-library",{mode:[1],searchQuery:[32],selectedCategory:[32]}]),y=b,h=function(){"undefined"!=typeof customElements&&["ui-library","category-section","library-card","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((e=>{switch(e){case"ui-library":customElements.get(i(e))||customElements.define(i(e),b);break;case"category-section":customElements.get(i(e))||r();break;case"library-card":customElements.get(i(e))||n();break;case"ui-badge":customElements.get(i(e))||c();break;case"ui-button":customElements.get(i(e))||d();break;case"ui-icon":customElements.get(i(e))||s();break;case"ui-input":customElements.get(i(e))||p();break;case"ui-loader":customElements.get(i(e))||l()}}))};export{y as UiLibrary,h as defineCustomElement}