@logosphere-ui/core 0.0.0-alpha.4 → 0.0.0-alpha.42

package/dist/download-manager-DDeTYRPs.cjs

@@ -0,0 +1,97 @@
+"use strict";const i=require("lit"),m=require("lit/decorators.js"),h=":host{display:block}.dm{font-family:var(--font-family-base)}.dm__container{width:100%;max-width:896px;margin:0 auto;padding:var(--spacing-6);background-color:var(--color-body-bg);border-radius:var(--radius-base);box-shadow:var(--shadow-md)}.dm__header{margin-bottom:var(--spacing-6)}.dm__title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-body-text);margin:0 0 var(--spacing-2) 0}.dm__stats{display:flex;gap:var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-tertiary)}.dm__form{margin-bottom:var(--spacing-6);padding:var(--spacing-4);background-color:var(--color-light);border-radius:var(--radius-base)}.dm__form-row{display:flex;gap:var(--spacing-4)}.dm__form-field{flex:1}.dm__form-field--filename{width:192px;flex:none}.dm__input{width:100%;padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);outline:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);background-color:var(--color-body-bg);color:var(--color-body-text);box-sizing:border-box;transition:border-color var(--transition-speed-fast) var(--transition-timing)}.dm__input:focus{border-color:var(--color-primary)}.dm__submit-btn{display:inline-flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:background-color var(--transition-speed-fast) var(--transition-timing);white-space:nowrap}.dm__submit-btn:hover:not(:disabled){background-color:var(--color-primary-hover)}.dm__submit-btn:disabled{opacity:.5;cursor:not-allowed}.dm__form-note{margin-top:var(--spacing-3);font-size:var(--font-size-xs);color:var(--color-tertiary)}.dm__form-note p{margin:0}.dm__spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-bottom-color:#fff;border-radius:var(--radius-full);animation:dm-spin .8s linear infinite}.dm__spinner--sm{width:12px;height:12px;border-color:#3b82f64d;border-bottom-color:#3b82f6}@keyframes dm-spin{to{transform:rotate(360deg)}}@keyframes dm-pulse{0%,to{opacity:1}50%{opacity:.5}}.dm__list{display:flex;flex-direction:column;gap:var(--spacing-4)}.dm__empty{text-align:center;padding:var(--spacing-8) 0;color:var(--color-tertiary);font-size:var(--font-size-sm)}.dm__item{border:1px solid var(--color-border);border-radius:var(--radius-base);padding:var(--spacing-4)}.dm__item--error{border-color:var(--color-primary-border-subtle);background-color:var(--color-danger-bg-subtle)}.dm__item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-3)}.dm__item-info{flex:1;min-width:0}.dm__item-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.dm__item-url{font-size:var(--font-size-xs);color:var(--color-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.dm__item-controls{display:flex;align-items:center;gap:var(--spacing-2)}.dm__status{font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-full);font-weight:var(--font-weight-medium)}.dm__status--downloading{background-color:var(--color-info-bg-subtle);color:var(--color-info-text-emphasis)}.dm__status--paused{background-color:var(--color-warning-bg-subtle);color:var(--color-warning-text-emphasis)}.dm__status--completed{background-color:var(--color-success-bg-subtle);color:var(--color-success-text-emphasis)}.dm__status--error{background-color:var(--color-danger-bg-subtle);color:var(--color-danger-text-emphasis)}.dm__status--pending{background-color:var(--color-gray-100);color:var(--color-gray-800)}.dm__remove-btn{background:none;border:none;cursor:pointer;color:var(--color-tertiary);padding:var(--spacing-1);line-height:1;font-size:var(--font-size-sm);border-radius:var(--radius-sm);transition:color var(--transition-speed-fast) var(--transition-timing)}.dm__remove-btn:hover{color:var(--color-danger)}.dm__progress{margin-bottom:var(--spacing-3)}.dm__progress-labels{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--color-tertiary);margin-bottom:var(--spacing-1)}.dm__progress-track{width:100%;background-color:var(--color-gray-200);border-radius:var(--radius-full);height:8px;overflow:hidden}.dm__progress-bar{height:8px;border-radius:var(--radius-full);transition:width .3s ease}.dm__progress-bar--downloading{background-color:var(--color-info-active)}.dm__progress-bar--paused{background-color:var(--color-warning-active)}.dm__progress-bar--completed{background-color:var(--color-success)}.dm__progress-bar--error{background-color:var(--color-danger)}.dm__progress-bar--pending{background-color:var(--color-gray-400)}.dm__progress-bar--indeterminate{width:100%;animation:dm-pulse 1.5s ease-in-out infinite}.dm__item-footer{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--color-tertiary)}.dm__item-speeds{display:flex;gap:var(--spacing-4)}.dm__item-actions{display:flex;gap:var(--spacing-2)}.dm__action-btn{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2);border:none;border-radius:var(--radius-sm);background:none;cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-xs);transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.dm__action-btn--pause{color:var(--color-info-active)}.dm__action-btn--pause:hover{background-color:var(--color-info-bg-subtle);color:var(--color-info-text-emphasis)}.dm__action-btn--resume{color:var(--color-success)}.dm__action-btn--resume:hover{background-color:var(--color-success-bg-subtle);color:var(--color-success-text-emphasis)}.dm__status-completed{color:var(--color-success)}.dm__error-info{color:var(--color-danger)}.dm__error-label{font-weight:var(--font-weight-medium)}.dm__error-detail{font-size:var(--font-size-xs)}.dm__chunks{margin-top:var(--spacing-3);font-size:var(--font-size-xs);color:var(--color-tertiary);display:flex;flex-direction:column;gap:2px}.dm__actions{margin-top:var(--spacing-6);display:flex;justify-content:space-between;align-items:center}.dm__clear-btn{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-tertiary);background:none;border:none;cursor:pointer;font-family:var(--font-family-base);transition:color var(--transition-speed-fast) var(--transition-timing)}.dm__clear-btn:hover{color:var(--color-body-text)}.dm__persist-note{font-size:var(--font-size-sm);color:var(--color-tertiary)}";var f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,u=(p,t,s,r)=>{for(var e=r>1?void 0:r?v(t,s):t,o=p.length-1,a;o>=0;o--)(a=p[o])&&(e=(r?a(t,s,e):a(e))||e);return r&&e&&f(t,s,e),e};exports.DownloadManager=class extends i.LitElement{constructor(){super(...arguments),this.chunkSize=2*1024*1024,this.maxConcurrentDownloads=3,this.maxConcurrentChunks=4,this.downloads=[],this.isAddingFiles=!1,this.activeDownloads=new Map,this.storageKey="download-manager-state",this.clearCompleted=()=>{this.downloads=this.downloads.filter(t=>t.status!=="completed"),this.requestUpdate(),this.saveState()},this.handleAddDownload=t=>{t.preventDefault();const s=t.target,r=new globalThis.FormData(s),e=r.get("url"),o=r.get("filename");if(!e?.trim())return;const a=this.downloads.find(n=>n.url===e.trim());a&&a.status!=="error"||(this.addDownload(e.trim(),o?.trim()||void 0),s.reset())}}connectedCallback(){super.connectedCallback(),this.loadState(),this.setupVisibilityChangeHandler()}disconnectedCallback(){super.disconnectedCallback(),this.saveState()}setupVisibilityChangeHandler(){document.addEventListener("visibilitychange",()=>{document.hidden&&this.saveState()})}loadState(){try{const t=globalThis.localStorage.getItem(this.storageKey);if(t){const s=JSON.parse(t);this.downloads=s.downloads||[],this.downloads.forEach(r=>{r.status==="downloading"&&(r.status="paused"),r.status==="error"&&r.error?.includes("Failed to fetch")&&(r.status="paused",r.error=void 0)})}}catch(t){console.error("Failed to load download state:",t)}}saveState(){try{const t={downloads:this.downloads.map(s=>({...s,status:s.status==="downloading"?"paused":s.status}))};globalThis.localStorage.setItem(this.storageKey,JSON.stringify(t))}catch(t){console.error("Failed to save download state:",t)}}async getFileSize(t){try{const s=await globalThis.fetch(t,{method:"HEAD",mode:"cors",credentials:"omit",signal:globalThis.AbortSignal.timeout(1e4)});if(s.ok){const r=s.headers.get("content-length");if(r){const e=parseInt(r);if(!isNaN(e)&&e>0)return e}}try{const r=await globalThis.fetch(t,{method:"GET",headers:{Range:"bytes=0-0"},mode:"cors",credentials:"omit",signal:globalThis.AbortSignal.timeout(1e4)});if(r.ok){const e=r.headers.get("content-range");if(e){const a=e.match(/\/(\d+)/);if(a){const n=parseInt(a[1]);if(!isNaN(n)&&n>0)return n}}const o=r.headers.get("content-length");if(o){const a=parseInt(o);if(!isNaN(a)&&a>0)return a}}}catch{}return 0}catch(s){return(!(s instanceof Error)||!["AbortError","ERR_EMPTY_RESPONSE","Failed to fetch"].some(r=>s.message.includes(r)))&&console.warn("Failed to get file size:",s),0}}createChunks(t){if(t===0)return[{start:0,end:this.chunkSize-1,downloaded:0,status:"pending"}];const s=[];for(let r=0;r<t;r+=this.chunkSize)s.push({start:r,end:Math.min(r+this.chunkSize-1,t-1),downloaded:0,status:"pending"});return s}async downloadChunk(t,s){const r=s.end>s.start?`bytes=${s.start+s.downloaded}-${s.end}`:`bytes=${s.start+s.downloaded}-`,e=await globalThis.fetch(t,{headers:{Range:r},signal:globalThis.AbortSignal.any([new globalThis.AbortController().signal,globalThis.AbortSignal.timeout(6e4)]),mode:"cors",credentials:"omit"});if(!e.ok){if(e.status===416)return{data:new Uint8Array(0),isComplete:!0};throw new Error(`HTTP ${e.status}: ${e.statusText}`)}const o=new Uint8Array(await e.arrayBuffer()),a=e.headers.get("content-range");let n=!1,d;if(a){const c=a.match(/\/(\d+)/);if(c){d=parseInt(c[1]);const l=a.match(/(\d+)-(\d+)/);l&&(n=parseInt(l[2])>=d-1)}}else o.length===0&&(n=!0);return{data:o,isComplete:n,actualSize:d}}async downloadFile(t){const s=new globalThis.AbortController;this.activeDownloads.set(t.id,s);try{t.status="downloading",t.startTime=Date.now(),this.requestUpdate();const r=t.chunks.filter(d=>d.status==="pending"),e=new Set,o=async d=>{const c=t.chunks[d];if(!(!c||c.status!=="pending")){c.status="downloading",e.add(d),this.requestUpdate();try{if(t.status!=="downloading")return;const l=await this.downloadChunk(t.url,c);if(t.status!=="downloading")return;c.downloaded=l.data.length,c.status="completed",t.downloaded+=c.downloaded,l.actualSize&&t.size===0&&(t.size=l.actualSize,t.size>this.chunkSize&&t.chunks.push(...this.createChunks(t.size).slice(1))),e.delete(d),this.requestUpdate(),this.saveState(),(l.isComplete||t.chunks.every(g=>g.status==="completed"))&&(t.status="completed",t.endTime=Date.now(),this.requestUpdate(),this.saveState())}catch(l){c.status="error",e.delete(d),t.chunks.filter(g=>g.status==="error").length===t.chunks.length&&(t.status="error",t.error=l instanceof Error?l.message:"All chunks failed"),this.requestUpdate(),this.saveState()}await new Promise(l=>setTimeout(l,1))}},a=[];let n=0;for(;(n<r.length||e.size>0)&&t.status==="downloading";){for(;e.size<this.maxConcurrentChunks&&n<r.length&&t.status==="downloading";)a.push(o(n)),n++;if(e.size>0)try{await Promise.race([Promise.race(a),new Promise(d=>setTimeout(d,100))])}catch{}await new Promise(d=>setTimeout(d,10))}}catch(r){(!(r instanceof Error)||r.name!=="AbortError")&&(t.status="error",t.error=r instanceof Error?r.message:"Unknown error",this.requestUpdate())}finally{this.activeDownloads.delete(t.id),this.saveState()}}pauseDownload(t){const s=this.activeDownloads.get(t);s&&(s.abort(),this.activeDownloads.delete(t));const r=this.downloads.find(e=>e.id===t);r?.status==="downloading"&&(r.status="paused",this.requestUpdate(),this.saveState())}resumeDownload(t){const s=this.downloads.find(r=>r.id===t);s?.status==="paused"&&this.downloadFile(s)}removeDownload(t){this.pauseDownload(t),this.downloads=this.downloads.filter(s=>s.id!==t),this.requestUpdate(),this.saveState()}formatBytes(t){if(t===0)return"0 Bytes";const s=1024,r=["Bytes","KB","MB","GB"],e=Math.floor(Math.log(t)/Math.log(s));return parseFloat((t/Math.pow(s,e)).toFixed(2))+" "+r[e]}formatDuration(t){const s=Math.floor(t/1e3),r=Math.floor(s/60),e=Math.floor(r/60);return e>0?`${e}h ${r%60}m ${s%60}s`:r>0?`${r}m ${s%60}s`:`${s}s`}getProgressPercentage(t){return t.size===0?t.status==="completed"?100:0:Math.round(t.downloaded/t.size*100)}getDownloadSpeed(t){if(!t.startTime)return"0 KB/s";const s=(Date.now()-t.startTime)/1e3;return s===0?"0 KB/s":this.formatBytes(t.downloaded/s)+"/s"}getETA(t){if(!t.startTime||t.downloaded===0||t.size===0)return"Unknown";const s=(Date.now()-t.startTime)/1e3;return this.formatDuration((t.size-t.downloaded)/(t.downloaded/s)*1e3)}async addDownload(t,s){try{this.isAddingFiles=!0,this.requestUpdate();try{new globalThis.URL(t)}catch{throw new Error("Invalid URL format")}const r=await this.getFileSize(t),o={id:`download_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,url:t,filename:s||t.split("/").pop()||"unknown",size:r,downloaded:0,status:"pending",chunks:this.createChunks(r)};this.downloads.push(o),this.requestUpdate(),this.saveState(),this.downloadFile(o)}catch(r){const e=r instanceof Error?r.message:"Unknown error occurred";this.downloads.push({id:`error_${Date.now()}`,url:t,filename:s||t.split("/").pop()||"unknown",size:0,downloaded:0,status:"error",chunks:[],error:e}),this.requestUpdate(),this.saveState()}finally{this.isAddingFiles=!1,this.requestUpdate()}}getStatusClass(t){return{downloading:"dm__status--downloading",paused:"dm__status--paused",completed:"dm__status--completed",error:"dm__status--error"}[t]??"dm__status--pending"}getProgressBarClass(t){return{downloading:"dm__progress-bar--downloading",paused:"dm__progress-bar--paused",completed:"dm__progress-bar--completed",error:"dm__progress-bar--error"}[t]??"dm__progress-bar--pending"}render(){const t=this.downloads.filter(e=>e.status==="downloading").length,s=this.downloads.filter(e=>e.status==="completed").length,r=this.downloads.filter(e=>e.status==="paused").length;return i.html`
+      <div class="dm">
+        <div class="dm__container">
+          <div class="dm__header">
+            <h2 class="dm__title">Download Manager</h2>
+            <div class="dm__stats">
+              <span>Active: ${t}</span>
+              <span>Paused: ${r}</span>
+              <span>Completed: ${s}</span>
+              <span>Total: ${this.downloads.length}</span>
+            </div>
+          </div>
+
+          <form @submit=${this.handleAddDownload} class="dm__form">
+            <div class="dm__form-row">
+              <div class="dm__form-field">
+                <input type="url" name="url" placeholder="Enter download URL" required class="dm__input" />
+              </div>
+              <div class="dm__form-field--filename">
+                <input type="text" name="filename" placeholder="Custom filename (optional)" class="dm__input" />
+              </div>
+              <button type="submit" ?disabled=${this.isAddingFiles} class="dm__submit-btn">
+                ${this.isAddingFiles?i.html`<span class="dm__spinner"></span> Adding...`:"Add Download"}
+              </button>
+            </div>
+            <div class="dm__form-note">
+              <p><strong>Note:</strong> Some servers don't support HEAD requests. File size will be discovered during download.</p>
+            </div>
+          </form>
+
+          <div class="dm__list">
+            ${this.downloads.length===0?i.html`<div class="dm__empty">No downloads yet. Add a URL to get started.</div>`:this.downloads.map(e=>i.html`
+                  <div class="dm__item ${e.status==="error"?"dm__item--error":""}">
+                    <div class="dm__item-header">
+                      <div class="dm__item-info">
+                        <p class="dm__item-name">${e.filename}</p>
+                        <p class="dm__item-url">${e.url}</p>
+                      </div>
+                      <div class="dm__item-controls">
+                        <span class="dm__status ${this.getStatusClass(e.status)}">${e.status}</span>
+                        <button class="dm__remove-btn" @click=${()=>this.removeDownload(e.id)} title="Remove download">✕</button>
+                      </div>
+                    </div>
+
+                    <div class="dm__progress">
+                      <div class="dm__progress-labels">
+                        <span>${this.formatBytes(e.downloaded)}${e.size>0?` / ${this.formatBytes(e.size)}`:" (unknown size)"}</span>
+                        <span>${e.size>0?`${this.getProgressPercentage(e)}%`:"Downloading..."}</span>
+                      </div>
+                      <div class="dm__progress-track">
+                        ${e.size>0?i.html`<div class="dm__progress-bar ${this.getProgressBarClass(e.status)}" style="width: ${this.getProgressPercentage(e)}%"></div>`:i.html`<div class="dm__progress-bar ${this.getProgressBarClass(e.status)} dm__progress-bar--indeterminate"></div>`}
+                      </div>
+                    </div>
+
+                    <div class="dm__item-footer">
+                      <div class="dm__item-speeds">
+                        <span>Speed: ${e.status==="downloading"?this.getDownloadSpeed(e):"0 KB/s"}</span>
+                        <span>ETA: ${e.status==="downloading"?this.getETA(e):"Unknown"}</span>
+                      </div>
+                      <div class="dm__item-actions">
+                        ${e.status==="downloading"?i.html`
+                          <button class="dm__action-btn dm__action-btn--pause" @click=${()=>this.pauseDownload(e.id)}>
+                            <span class="dm__spinner dm__spinner--sm"></span> Pause
+                          </button>
+                        `:e.status==="paused"?i.html`
+                          <button class="dm__action-btn dm__action-btn--resume" @click=${()=>this.resumeDownload(e.id)}>Resume</button>
+                        `:e.status==="completed"?i.html`
+                          <span class="dm__status-completed">Completed</span>
+                        `:e.status==="error"?i.html`
+                          <div class="dm__error-info">
+                            <div class="dm__error-label">Error</div>
+                            <div class="dm__error-detail">${e.error}</div>
+                          </div>
+                        `:""}
+                      </div>
+                    </div>
+
+                    ${e.status==="downloading"?i.html`
+                      <div class="dm__chunks">
+                        <div>Chunks: ${e.chunks.filter(o=>o.status==="completed").length}/${e.chunks.length} completed</div>
+                        <div>Chunk size: ${this.formatBytes(this.chunkSize)}</div>
+                        <div>Downloaded: ${this.formatBytes(e.downloaded)}${e.size>0?` / ${this.formatBytes(e.size)}`:""}</div>
+                      </div>
+                    `:""}
+                  </div>
+                `)}
+          </div>
+
+          ${this.downloads.length>0?i.html`
+            <div class="dm__actions">
+              <button class="dm__clear-btn" @click=${this.clearCompleted}>Clear Completed</button>
+              <div class="dm__persist-note">State is automatically saved and will persist across browser sessions</div>
+            </div>
+          `:""}
+        </div>
+      </div>
+    `}};exports.DownloadManager.styles=[i.css`${i.unsafeCSS(h)}`];u([m.property({type:Number})],exports.DownloadManager.prototype,"chunkSize",2);u([m.property({type:Number})],exports.DownloadManager.prototype,"maxConcurrentDownloads",2);u([m.property({type:Number})],exports.DownloadManager.prototype,"maxConcurrentChunks",2);u([m.state()],exports.DownloadManager.prototype,"downloads",2);u([m.state()],exports.DownloadManager.prototype,"isAddingFiles",2);exports.DownloadManager=u([m.customElement("download-manager")],exports.DownloadManager);

package/dist/download-manager.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./download-manager-BSIMTGaK.cjs");Object.defineProperty(exports,"DownloadManager",{enumerable:!0,get:()=>e.DownloadManager});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./download-manager-DDeTYRPs.cjs");Object.defineProperty(exports,"DownloadManager",{enumerable:!0,get:()=>e.DownloadManager});

package/dist/download-manager.js

@@ -1,4 +1,4 @@
-import { D as r } from "./download-manager-A4fOxGWJ.js";
+import { D as r } from "./download-manager-BPg-6Qfg.js";
 export {
   r as DownloadManager
 };

package/dist/drawer-3nyjAkcS.cjs

@@ -0,0 +1,32 @@
+"use strict";const l=require("lit"),i=require("lit/decorators.js");require("./button-DRZ4sG4T.cjs");require("./ui-icon-DIucAQC_.cjs");const p=":host{display:block}.drawer{position:relative;font-family:var(--font-family-base)}.drawer__trigger{display:inline-flex}.drawer__panel{position:fixed;top:0;bottom:0;width:var(--drawer-width, 360px);max-width:min(100vw,var(--drawer-width, 360px));background:var(--color-body-bg);border-left:1px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:var(--z-index-modal);display:flex;flex-direction:column;pointer-events:none;opacity:0;transition:transform var(--transition-speed-slow) var(--transition-timing),opacity var(--transition-speed-slow) linear}.drawer__panel--right{right:0;transform:translate(100%)}.drawer__panel--left{left:0;transform:translate(-100%);border-left:none;border-right:1px solid var(--color-border)}.drawer__panel--open{transform:translate(0);pointer-events:auto;opacity:1}.drawer__header{padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2)}.drawer__title{margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer__close{width:28px;height:28px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-body-bg);display:inline-flex;align-items:center;justify-content:center;color:var(--color-body-color);cursor:pointer}.drawer__close:hover{background:var(--color-tertiary)}.drawer__body{flex:1;overflow:auto;padding:var(--spacing-4)}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(d,e,t,r)=>{for(var o=r>1?void 0:r?h(e,t):e,a=d.length-1,n;a>=0;a--)(n=d[a])&&(o=(r?n(e,t,o):n(o))||o);return r&&o&&c(e,t,o),o};exports.Drawer=class extends l.LitElement{constructor(){super(...arguments),this.open=!1,this.title="",this.position="right",this.width=360,this.closeOnEsc=!0,this.containerSelector="",this._frameStyle="",this._onKeyDown=e=>{!this.open||!this.closeOnEsc||(e.key==="Escape"||e.key==="Esc")&&this._setOpen(!1)},this._onTriggerClick=()=>this._setOpen(!0),this._onCloseClick=()=>this._setOpen(!1),this._syncFrame=()=>{const e=this._resolveContainer().getBoundingClientRect(),t=Math.max(0,e.top),r=Math.max(0,window.innerHeight-e.bottom),o=Math.max(0,e.left),a=Math.max(0,window.innerWidth-e.right),n=Math.max(0,e.width);this._frameStyle=this.position==="right"?`top:${t}px;bottom:${r}px;right:${a}px;max-width:${n}px;`:`top:${t}px;bottom:${r}px;left:${o}px;max-width:${n}px;`}}connectedCallback(){super.connectedCallback(),window.addEventListener("keydown",this._onKeyDown,!0),window.addEventListener("resize",this._syncFrame),window.addEventListener("scroll",this._syncFrame,!0),this.updateComplete.then(()=>this._syncFrame())}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this._onKeyDown,!0),window.removeEventListener("resize",this._syncFrame),window.removeEventListener("scroll",this._syncFrame,!0)}updated(e){(e.has("open")||e.has("position")||e.has("width")||e.has("containerSelector"))&&this._syncFrame()}openDrawer(){this._setOpen(!0)}closeDrawer(){this._setOpen(!1)}_setOpen(e){this.open!==e&&(this.open=e,this.dispatchEvent(new CustomEvent(e?"drawer-open":"drawer-close",{bubbles:!0,composed:!0})))}_resolveContainer(){if(this.containerSelector){const e=this.getRootNode();if("querySelector"in e){const r=e.querySelector(this.containerSelector);if(r)return r}const t=document.querySelector(this.containerSelector);if(t)return t}return this.parentElement??this}render(){return l.html`
+      <div class="drawer">
+        <div class="drawer__trigger" @click=${this._onTriggerClick}>
+          <slot name="trigger"></slot>
+        </div>
+
+        <aside
+          class="drawer__panel drawer__panel--${this.position} ${this.open?"drawer__panel--open":""}"
+          style=${`--drawer-width:${this.width}px;${this._frameStyle}`}
+          role="dialog"
+          aria-modal="false"
+          aria-hidden=${this.open?"false":"true"}
+        >
+          <div class="drawer__header">
+            <h3 class="drawer__title">${this.title}</h3>
+            <logosphere-button
+              variant="outline"
+              theme="secondary"
+              size="md"
+              iconOnly
+              aria-label="Close drawer"
+              @click=${this._onCloseClick}
+            >
+              <ui-icon name="uil-times" size="16"></ui-icon>
+            </logosphere-button>
+          </div>
+          <div class="drawer__body">
+            <slot></slot>
+          </div>
+        </aside>
+      </div>
+    `}};exports.Drawer.styles=[l.css`${l.unsafeCSS(p)}`];s([i.property({type:Boolean,reflect:!0})],exports.Drawer.prototype,"open",2);s([i.property({type:String,attribute:"drawer-title"})],exports.Drawer.prototype,"title",2);s([i.property({type:String})],exports.Drawer.prototype,"position",2);s([i.property({type:Number})],exports.Drawer.prototype,"width",2);s([i.property({type:Boolean})],exports.Drawer.prototype,"closeOnEsc",2);s([i.property({type:String})],exports.Drawer.prototype,"containerSelector",2);exports.Drawer=s([i.customElement("logosphere-drawer")],exports.Drawer);

package/dist/drawer-CE9zzllI.js

@@ -0,0 +1,114 @@
+import { unsafeCSS as c, css as p, LitElement as h, html as w } from "lit";
+import { property as l, customElement as m } from "lit/decorators.js";
+import "./button-Uu9oaieg.js";
+import "./ui-icon-BMJNdIOq.js";
+const _ = ":host{display:block}.drawer{position:relative;font-family:var(--font-family-base)}.drawer__trigger{display:inline-flex}.drawer__panel{position:fixed;top:0;bottom:0;width:var(--drawer-width, 360px);max-width:min(100vw,var(--drawer-width, 360px));background:var(--color-body-bg);border-left:1px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:var(--z-index-modal);display:flex;flex-direction:column;pointer-events:none;opacity:0;transition:transform var(--transition-speed-slow) var(--transition-timing),opacity var(--transition-speed-slow) linear}.drawer__panel--right{right:0;transform:translate(100%)}.drawer__panel--left{left:0;transform:translate(-100%);border-left:none;border-right:1px solid var(--color-border)}.drawer__panel--open{transform:translate(0);pointer-events:auto;opacity:1}.drawer__header{padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2)}.drawer__title{margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer__close{width:28px;height:28px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-body-bg);display:inline-flex;align-items:center;justify-content:center;color:var(--color-body-color);cursor:pointer}.drawer__close:hover{background:var(--color-tertiary)}.drawer__body{flex:1;overflow:auto;padding:var(--spacing-4)}";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (e, t, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? f(t, r) : t, a = e.length - 1, d; a >= 0; a--)
+    (d = e[a]) && (o = (s ? d(t, r, o) : d(o)) || o);
+  return s && o && v(t, r, o), o;
+};
+let i = class extends h {
+  constructor() {
+    super(...arguments), this.open = !1, this.title = "", this.position = "right", this.width = 360, this.closeOnEsc = !0, this.containerSelector = "", this._frameStyle = "", this._onKeyDown = (e) => {
+      !this.open || !this.closeOnEsc || (e.key === "Escape" || e.key === "Esc") && this._setOpen(!1);
+    }, this._onTriggerClick = () => this._setOpen(!0), this._onCloseClick = () => this._setOpen(!1), this._syncFrame = () => {
+      const e = this._resolveContainer().getBoundingClientRect(), t = Math.max(0, e.top), r = Math.max(0, window.innerHeight - e.bottom), s = Math.max(0, e.left), o = Math.max(0, window.innerWidth - e.right), a = Math.max(0, e.width);
+      this._frameStyle = this.position === "right" ? `top:${t}px;bottom:${r}px;right:${o}px;max-width:${a}px;` : `top:${t}px;bottom:${r}px;left:${s}px;max-width:${a}px;`;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("keydown", this._onKeyDown, !0), window.addEventListener("resize", this._syncFrame), window.addEventListener("scroll", this._syncFrame, !0), this.updateComplete.then(() => this._syncFrame());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("keydown", this._onKeyDown, !0), window.removeEventListener("resize", this._syncFrame), window.removeEventListener("scroll", this._syncFrame, !0);
+  }
+  updated(e) {
+    (e.has("open") || e.has("position") || e.has("width") || e.has("containerSelector")) && this._syncFrame();
+  }
+  openDrawer() {
+    this._setOpen(!0);
+  }
+  closeDrawer() {
+    this._setOpen(!1);
+  }
+  _setOpen(e) {
+    this.open !== e && (this.open = e, this.dispatchEvent(
+      new CustomEvent(e ? "drawer-open" : "drawer-close", {
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _resolveContainer() {
+    if (this.containerSelector) {
+      const e = this.getRootNode();
+      if ("querySelector" in e) {
+        const r = e.querySelector(this.containerSelector);
+        if (r) return r;
+      }
+      const t = document.querySelector(this.containerSelector);
+      if (t) return t;
+    }
+    return this.parentElement ?? this;
+  }
+  render() {
+    return w`
+      <div class="drawer">
+        <div class="drawer__trigger" @click=${this._onTriggerClick}>
+          <slot name="trigger"></slot>
+        </div>
+
+        <aside
+          class="drawer__panel drawer__panel--${this.position} ${this.open ? "drawer__panel--open" : ""}"
+          style=${`--drawer-width:${this.width}px;${this._frameStyle}`}
+          role="dialog"
+          aria-modal="false"
+          aria-hidden=${this.open ? "false" : "true"}
+        >
+          <div class="drawer__header">
+            <h3 class="drawer__title">${this.title}</h3>
+            <logosphere-button
+              variant="outline"
+              theme="secondary"
+              size="md"
+              iconOnly
+              aria-label="Close drawer"
+              @click=${this._onCloseClick}
+            >
+              <ui-icon name="uil-times" size="16"></ui-icon>
+            </logosphere-button>
+          </div>
+          <div class="drawer__body">
+            <slot></slot>
+          </div>
+        </aside>
+      </div>
+    `;
+  }
+};
+i.styles = [p`${c(_)}`];
+n([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "open", 2);
+n([
+  l({ type: String, attribute: "drawer-title" })
+], i.prototype, "title", 2);
+n([
+  l({ type: String })
+], i.prototype, "position", 2);
+n([
+  l({ type: Number })
+], i.prototype, "width", 2);
+n([
+  l({ type: Boolean })
+], i.prototype, "closeOnEsc", 2);
+n([
+  l({ type: String })
+], i.prototype, "containerSelector", 2);
+i = n([
+  m("logosphere-drawer")
+], i);
+export {
+  i as D
+};

package/dist/drawer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./drawer-3nyjAkcS.cjs");Object.defineProperty(exports,"Drawer",{enumerable:!0,get:()=>e.Drawer});

package/dist/drawer.js

@@ -0,0 +1,4 @@
+import { D as e } from "./drawer-CE9zzllI.js";
+export {
+  e as Drawer
+};

package/dist/formfield-CRcyUMvQ.cjs

@@ -0,0 +1,33 @@
+"use strict";const l=require("lit"),o=require("lit/decorators.js"),f=":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:12px;line-height:1.125rem;letter-spacing:-.12px;font-weight:var(--font-weight-medium);color:var(--color-tertiary);margin-bottom:var(--spacing-1)}.formfield__required{color:var(--color-danger);margin-left:var(--spacing-1)}.formfield__container{position:relative;display:flex;align-items:center;box-sizing:border-box;border-radius:var(--formfield-border-radius, var(--radius-base));border-top:var(--formfield-border-top, var(--formfield-border-top-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-right:var(--formfield-border-right, var(--formfield-border-right-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-bottom:var(--formfield-border-bottom, var(--formfield-border-bottom-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-left:var(--formfield-border-left, var(--formfield-border-left-width, 1px) solid var(--formfield-border-color, var(--color-border)));padding:0 var(--spacing-2) 0 var(--spacing-3);background-color:var(--color-body-bg);cursor:text;transition:border-color var(--transition-speed-base) var(--transition-timing),background-color var(--transition-speed-base) var(--transition-timing)}.formfield__container--cursor-text{cursor:text}.formfield__container--cursor-pointer{cursor:pointer}.formfield__container--cursor-default{cursor:default}.formfield__container--default{min-height:32px}.formfield__container--large{min-height:40px}.formfield__container--multiline{align-items:flex-start;min-height:64px;padding-top:var(--spacing-2);padding-bottom:var(--spacing-2)}import .formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-light)}.formfield__container--focused{border-color:var(--color-body-text);background-color:var(--color-body-bg)}.formfield__container--error{border-color:var(--color-danger)}.formfield__container--disabled{background-color:var(--color-body-bg);opacity:.4;cursor:not-allowed;pointer-events:none}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent;background-color:var(--color-light)}.formfield__input-area{flex:1;min-width:0;display:flex;align-items:center}.formfield__container--multiline .formfield__input-area{align-items:flex-start;align-self:stretch}.formfield__prefix,.formfield__clear,.formfield__suffix{display:flex;align-items:center;flex-shrink:0;align-self:stretch}.formfield__container--multiline .formfield__clear,.formfield__container--multiline .formfield__suffix{align-items:flex-start}.formfield__prefix{margin-right:var(--spacing-2)}.formfield__clear,.formfield__suffix{margin-left:var(--spacing-2)}.formfield__container--has-prefix .formfield__prefix{border-right:1px solid var(--color-border);padding-right:var(--spacing-2)}.formfield__container--has-suffix .formfield__suffix{border-left:1px solid var(--color-border);padding-left:var(--spacing-2)}.formfield__prefix:empty,.formfield__clear:empty,.formfield__suffix:empty{display:none}.formfield__helper{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text)}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,t=(n,e,r,a)=>{for(var i=a>1?void 0:a?h(e,r):e,s=n.length-1,d;s>=0;s--)(d=n[s])&&(i=(a?d(e,r,i):d(i))||i);return a&&i&&c(e,r,i),i};exports.FormField=class extends l.LitElement{constructor(){super(...arguments),this.label="",this.helper="",this.error="",this.placeholder="",this.size="default",this.variant="default",this.cursor="text",this.required=!1,this.disabled=!1,this.readonly=!1,this.multiline=!1,this.forceFocused=!1,this._focused=!1,this._hovered=!1,this._hasPrefix=!1,this._hasSuffix=!1,this.handleSlotFocus=e=>{const r=e.target;["INPUT","TEXTAREA","SELECT"].includes(r.tagName)&&(this._focused=!0,this.dispatchEvent(new CustomEvent("field-focus",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleSlotBlur=e=>{const r=e.target;["INPUT","TEXTAREA","SELECT"].includes(r.tagName)&&(this._focused=!1,this.dispatchEvent(new CustomEvent("field-blur",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleMouseEnter=()=>{this._hovered=!0},this.handleMouseLeave=()=>{this._hovered=!1},this.handleContainerClick=e=>{const r=e.target;if(["INPUT","TEXTAREA","SELECT","BUTTON"].includes(r.tagName))return;this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({flatten:!0}).find(s=>["INPUT","TEXTAREA","SELECT"].includes(s.tagName))?.focus()},this.handlePrefixSlotChange=e=>{const r=e.target;this._hasPrefix=r.assignedElements({flatten:!0}).length>0},this.handleSuffixSlotChange=e=>{const r=e.target;this._hasSuffix=r.assignedElements({flatten:!0}).length>0}}connectedCallback(){super.connectedCallback(),this.addEventListener("focus",this.handleSlotFocus,!0),this.addEventListener("blur",this.handleSlotBlur,!0)}firstUpdated(){const e=this.shadowRoot?.querySelector('slot[name="prefix"]'),r=this.shadowRoot?.querySelector('slot[name="suffix"]');e&&(this._hasPrefix=e.assignedElements({flatten:!0}).length>0),r&&(this._hasSuffix=r.assignedElements({flatten:!0}).length>0)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this.handleSlotFocus,!0),this.removeEventListener("blur",this.handleSlotBlur,!0)}render(){const e=!!this.error,r=!e&&!!this.helper,a=["formfield__container",`formfield__container--${this.size}`,`formfield__container--cursor-${this.cursor}`,this._hasPrefix?"formfield__container--has-prefix":"",this._hasSuffix?"formfield__container--has-suffix":"",e?"formfield__container--error":"",this._focused||this.forceFocused?"formfield__container--focused":"",this._hovered?"formfield__container--hovered":"",this.disabled?"formfield__container--disabled":"",this.variant==="subtle"?"formfield__container--subtle":"",this.multiline?"formfield__container--multiline":""].filter(Boolean).join(" ");return l.html`
+      <div class="formfield">
+        ${this.label?l.html`
+          <label class="formfield__label">
+            ${this.label}
+            ${this.required?l.html`<span class="formfield__required">*</span>`:""}
+          </label>
+        `:""}
+
+        <div
+          class="${a}"
+          @mouseenter=${this.handleMouseEnter}
+          @mouseleave=${this.handleMouseLeave}
+          @click=${this.handleContainerClick}
+        >
+          <div class="formfield__prefix">
+            <slot name="prefix" @slotchange=${this.handlePrefixSlotChange}></slot>
+          </div>
+          <div class="formfield__input-area">
+            <slot></slot>
+          </div>
+          <div class="formfield__clear">
+            <slot name="clear"></slot>
+          </div>
+          <div class="formfield__suffix">
+            <slot name="suffix" @slotchange=${this.handleSuffixSlotChange}></slot>
+          </div>
+        </div>
+
+        ${r?l.html`<div class="formfield__helper">${this.helper}</div>`:""}
+        ${e?l.html`<div class="formfield__error">${this.error}</div>`:""}
+      </div>
+    `}};exports.FormField.styles=[l.css`${l.unsafeCSS(f)}`];t([o.property({type:String})],exports.FormField.prototype,"label",2);t([o.property({type:String})],exports.FormField.prototype,"helper",2);t([o.property({type:String})],exports.FormField.prototype,"error",2);t([o.property({type:String})],exports.FormField.prototype,"placeholder",2);t([o.property({type:String})],exports.FormField.prototype,"size",2);t([o.property({type:String})],exports.FormField.prototype,"variant",2);t([o.property({type:String})],exports.FormField.prototype,"cursor",2);t([o.property({type:Boolean})],exports.FormField.prototype,"required",2);t([o.property({type:Boolean})],exports.FormField.prototype,"disabled",2);t([o.property({type:Boolean})],exports.FormField.prototype,"readonly",2);t([o.property({type:Boolean})],exports.FormField.prototype,"multiline",2);t([o.property({type:Boolean})],exports.FormField.prototype,"forceFocused",2);t([o.state()],exports.FormField.prototype,"_focused",2);t([o.state()],exports.FormField.prototype,"_hovered",2);t([o.state()],exports.FormField.prototype,"_hasPrefix",2);t([o.state()],exports.FormField.prototype,"_hasSuffix",2);exports.FormField=t([o.customElement("logosphere-formfield")],exports.FormField);

package/dist/formfield-O327HYt0.js

@@ -0,0 +1,154 @@
+import { unsafeCSS as h, css as m, LitElement as p, html as n } from "lit";
+import { property as i, state as f, customElement as _ } from "lit/decorators.js";
+const u = ":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:12px;line-height:1.125rem;letter-spacing:-.12px;font-weight:var(--font-weight-medium);color:var(--color-tertiary);margin-bottom:var(--spacing-1)}.formfield__required{color:var(--color-danger);margin-left:var(--spacing-1)}.formfield__container{position:relative;display:flex;align-items:center;box-sizing:border-box;border-radius:var(--formfield-border-radius, var(--radius-base));border-top:var(--formfield-border-top, var(--formfield-border-top-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-right:var(--formfield-border-right, var(--formfield-border-right-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-bottom:var(--formfield-border-bottom, var(--formfield-border-bottom-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-left:var(--formfield-border-left, var(--formfield-border-left-width, 1px) solid var(--formfield-border-color, var(--color-border)));padding:0 var(--spacing-2) 0 var(--spacing-3);background-color:var(--color-body-bg);cursor:text;transition:border-color var(--transition-speed-base) var(--transition-timing),background-color var(--transition-speed-base) var(--transition-timing)}.formfield__container--cursor-text{cursor:text}.formfield__container--cursor-pointer{cursor:pointer}.formfield__container--cursor-default{cursor:default}.formfield__container--default{min-height:32px}.formfield__container--large{min-height:40px}.formfield__container--multiline{align-items:flex-start;min-height:64px;padding-top:var(--spacing-2);padding-bottom:var(--spacing-2)}import .formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-light)}.formfield__container--focused{border-color:var(--color-body-text);background-color:var(--color-body-bg)}.formfield__container--error{border-color:var(--color-danger)}.formfield__container--disabled{background-color:var(--color-body-bg);opacity:.4;cursor:not-allowed;pointer-events:none}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent;background-color:var(--color-light)}.formfield__input-area{flex:1;min-width:0;display:flex;align-items:center}.formfield__container--multiline .formfield__input-area{align-items:flex-start;align-self:stretch}.formfield__prefix,.formfield__clear,.formfield__suffix{display:flex;align-items:center;flex-shrink:0;align-self:stretch}.formfield__container--multiline .formfield__clear,.formfield__container--multiline .formfield__suffix{align-items:flex-start}.formfield__prefix{margin-right:var(--spacing-2)}.formfield__clear,.formfield__suffix{margin-left:var(--spacing-2)}.formfield__container--has-prefix .formfield__prefix{border-right:1px solid var(--color-border);padding-right:var(--spacing-2)}.formfield__container--has-suffix .formfield__suffix{border-left:1px solid var(--color-border);padding-left:var(--spacing-2)}.formfield__prefix:empty,.formfield__clear:empty,.formfield__suffix:empty{display:none}.formfield__helper{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text)}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, t = (e, r, a, s) => {
+  for (var l = s > 1 ? void 0 : s ? v(r, a) : r, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (l = (s ? c(r, a, l) : c(l)) || l);
+  return s && l && g(r, a, l), l;
+};
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.label = "", this.helper = "", this.error = "", this.placeholder = "", this.size = "default", this.variant = "default", this.cursor = "text", this.required = !1, this.disabled = !1, this.readonly = !1, this.multiline = !1, this.forceFocused = !1, this._focused = !1, this._hovered = !1, this._hasPrefix = !1, this._hasSuffix = !1, this.handleSlotFocus = (e) => {
+      const r = e.target;
+      ["INPUT", "TEXTAREA", "SELECT"].includes(r.tagName) && (this._focused = !0, this.dispatchEvent(new CustomEvent("field-focus", {
+        bubbles: !0,
+        composed: !0,
+        detail: { originalEvent: e }
+      })));
+    }, this.handleSlotBlur = (e) => {
+      const r = e.target;
+      ["INPUT", "TEXTAREA", "SELECT"].includes(r.tagName) && (this._focused = !1, this.dispatchEvent(new CustomEvent("field-blur", {
+        bubbles: !0,
+        composed: !0,
+        detail: { originalEvent: e }
+      })));
+    }, this.handleMouseEnter = () => {
+      this._hovered = !0;
+    }, this.handleMouseLeave = () => {
+      this._hovered = !1;
+    }, this.handleContainerClick = (e) => {
+      const r = e.target;
+      if (["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(r.tagName)) return;
+      this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({ flatten: !0 }).find((l) => ["INPUT", "TEXTAREA", "SELECT"].includes(l.tagName))?.focus();
+    }, this.handlePrefixSlotChange = (e) => {
+      const r = e.target;
+      this._hasPrefix = r.assignedElements({ flatten: !0 }).length > 0;
+    }, this.handleSuffixSlotChange = (e) => {
+      const r = e.target;
+      this._hasSuffix = r.assignedElements({ flatten: !0 }).length > 0;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("focus", this.handleSlotFocus, !0), this.addEventListener("blur", this.handleSlotBlur, !0);
+  }
+  firstUpdated() {
+    const e = this.shadowRoot?.querySelector('slot[name="prefix"]'), r = this.shadowRoot?.querySelector('slot[name="suffix"]');
+    e && (this._hasPrefix = e.assignedElements({ flatten: !0 }).length > 0), r && (this._hasSuffix = r.assignedElements({ flatten: !0 }).length > 0);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("focus", this.handleSlotFocus, !0), this.removeEventListener("blur", this.handleSlotBlur, !0);
+  }
+  render() {
+    const e = !!this.error, r = !e && !!this.helper, a = [
+      "formfield__container",
+      `formfield__container--${this.size}`,
+      `formfield__container--cursor-${this.cursor}`,
+      this._hasPrefix ? "formfield__container--has-prefix" : "",
+      this._hasSuffix ? "formfield__container--has-suffix" : "",
+      e ? "formfield__container--error" : "",
+      this._focused || this.forceFocused ? "formfield__container--focused" : "",
+      this._hovered ? "formfield__container--hovered" : "",
+      this.disabled ? "formfield__container--disabled" : "",
+      this.variant === "subtle" ? "formfield__container--subtle" : "",
+      this.multiline ? "formfield__container--multiline" : ""
+    ].filter(Boolean).join(" ");
+    return n`
+      <div class="formfield">
+        ${this.label ? n`
+          <label class="formfield__label">
+            ${this.label}
+            ${this.required ? n`<span class="formfield__required">*</span>` : ""}
+          </label>
+        ` : ""}
+
+        <div
+          class="${a}"
+          @mouseenter=${this.handleMouseEnter}
+          @mouseleave=${this.handleMouseLeave}
+          @click=${this.handleContainerClick}
+        >
+          <div class="formfield__prefix">
+            <slot name="prefix" @slotchange=${this.handlePrefixSlotChange}></slot>
+          </div>
+          <div class="formfield__input-area">
+            <slot></slot>
+          </div>
+          <div class="formfield__clear">
+            <slot name="clear"></slot>
+          </div>
+          <div class="formfield__suffix">
+            <slot name="suffix" @slotchange=${this.handleSuffixSlotChange}></slot>
+          </div>
+        </div>
+
+        ${r ? n`<div class="formfield__helper">${this.helper}</div>` : ""}
+        ${e ? n`<div class="formfield__error">${this.error}</div>` : ""}
+      </div>
+    `;
+  }
+};
+o.styles = [m`${h(u)}`];
+t([
+  i({ type: String })
+], o.prototype, "label", 2);
+t([
+  i({ type: String })
+], o.prototype, "helper", 2);
+t([
+  i({ type: String })
+], o.prototype, "error", 2);
+t([
+  i({ type: String })
+], o.prototype, "placeholder", 2);
+t([
+  i({ type: String })
+], o.prototype, "size", 2);
+t([
+  i({ type: String })
+], o.prototype, "variant", 2);
+t([
+  i({ type: String })
+], o.prototype, "cursor", 2);
+t([
+  i({ type: Boolean })
+], o.prototype, "required", 2);
+t([
+  i({ type: Boolean })
+], o.prototype, "disabled", 2);
+t([
+  i({ type: Boolean })
+], o.prototype, "readonly", 2);
+t([
+  i({ type: Boolean })
+], o.prototype, "multiline", 2);
+t([
+  i({ type: Boolean })
+], o.prototype, "forceFocused", 2);
+t([
+  f()
+], o.prototype, "_focused", 2);
+t([
+  f()
+], o.prototype, "_hovered", 2);
+t([
+  f()
+], o.prototype, "_hasPrefix", 2);
+t([
+  f()
+], o.prototype, "_hasSuffix", 2);
+o = t([
+  _("logosphere-formfield")
+], o);
+export {
+  o as F
+};

package/dist/formfield.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./formfield-D_7NFFoe.cjs");Object.defineProperty(exports,"FormField",{enumerable:!0,get:()=>e.FormField});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./formfield-CRcyUMvQ.cjs");Object.defineProperty(exports,"FormField",{enumerable:!0,get:()=>e.FormField});

package/dist/formfield.js

@@ -1,4 +1,4 @@
-import { F } from "./formfield-d8fp9FTV.js";
+import { F } from "./formfield-O327HYt0.js";
 export {
   F as FormField
 };