@brightspot/ui 6.8.0 → 6.8.2

package/dist/storybook/assets/{Upload.stories-sAEiabwq.js → Upload.stories-BsQDCDqo.js}

@@ -1,4 +1,54 @@
-import{g as C,x as S}from"./iframe-B9buZjP7.js";import{o as E}from"./if-defined-BwWBCoAU.js";import{o as x}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:B,args:U,argTypes:c}=C("btu-upload"),F=e=>{const o={};return e.dropzoneBg&&(o["--upload-dropzone-bg"]=e.dropzoneBg),e.dropzoneBorderColor&&(o["--upload-dropzone-border-color"]=e.dropzoneBorderColor),e.dropzoneBorderRadius&&(o["--upload-dropzone-border-radius"]=e.dropzoneBorderRadius),e.dropzoneHoverBg&&(o["--upload-dropzone-hover-bg"]=e.dropzoneHoverBg),e.dropzoneHoverBorderColor&&(o["--upload-dropzone-hover-border-color"]=e.dropzoneHoverBorderColor),e.dropzoneFocusRingColor&&(o["--upload-dropzone-focus-ring-color"]=e.dropzoneFocusRingColor),e.itemBg&&(o["--upload-item-bg"]=e.itemBg),e.itemBorderColor&&(o["--upload-item-border-color"]=e.itemBorderColor),e.itemActiveBorderColor&&(o["--upload-item-active-border-color"]=e.itemActiveBorderColor),e.itemCompleteBorderColor&&(o["--upload-item-complete-border-color"]=e.itemCompleteBorderColor),e.itemErrorBg&&(o["--upload-item-error-bg"]=e.itemErrorBg),e.itemErrorBorderColor&&(o["--upload-item-error-border-color"]=e.itemErrorBorderColor),o},T={title:"Components/Upload",component:"btu-upload",tags:["autodocs"],parameters:{docs:{subtitle:"btu-upload",description:{component:`
+import{i as L,x as u,E as B,g as M}from"./iframe-DlBK9Drk.js";import{o as C}from"./if-defined-DerKRcyC.js";import{o as E}from"./style-map-DE4G47KD.js";import{n as k}from"./property-Bmq4RTSP.js";import{r as j}from"./state-DVIUS0Gf.js";import{a as m}from"./aria-D5THOgos.js";import{E as R,R as O}from"./ReadyMixin-CvX_eidU.js";import{l as c}from"./i18n-BQ-Uj-0B.js";import{m as A,v as T,f as q}from"./UploadItem-CYQqNwUF.js";import"./Icon-CWyJRQf7.js";import"./preload-helper-PPVm8Dsz.js";import"./celebrate-KwPoF1K3.js";import"./position-CFNQy3J6.js";import"./IconButton-Di5Rgs7F.js";import"./TooltipMixin-CVKslCDt.js";import"./LinearProgress-D9ngIVlv.js";import"./ProgressMixin-CeSrn0_P.js";var N=Object.defineProperty,b=(t,e,r,o)=>{for(var s=void 0,i=t.length-1,n;i>=0;i--)(n=t[i])&&(s=n(e,r,s)||s);return s&&N(e,r,s),s};class f extends R(O(L)){constructor(){super(...arguments),this.accept="",this.maxFileSize=0,this.maxFiles=1/0,this.disabled=!1,this.noDrag=!1,this._files=new Map,this._items=new Map,this._milestones=new Map,this._dragOver=!1,this._dragCounter=0}get _inputEl(){return this.querySelector('input[type="file"]')}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.classList.add("btu-upload")}disconnectedCallback(){super.disconnectedCallback();for(const e of this._files.values())e.status!=="complete"&&this.emit("btu-upload-file-removed",{id:e.id,file:e.file});this._files.clear(),this._items.clear(),this._milestones.clear(),this._dragCounter=0,this._dragOver=!1}firstUpdated(){this.addEventListener("btu-upload-item-remove",e=>{e.stopPropagation();const{id:r}=e.detail;this.removeFile(r)}),this.addEventListener("btu-upload-item-retry",e=>{e.stopPropagation();const{id:r}=e.detail,o=this._files.get(r);o&&this.emit("btu-upload-file-retry",{id:o.id,file:o.file})}),this.emit("btu-upload-ready")}_handleInputChange(e){const r=e.target;r.files&&(this._processFiles(Array.from(r.files)),r.value="")}_handleSelectClick(e){e.stopPropagation(),!this._interactionBlocked&&this._inputEl?.click()}_handleDropzoneClick(){this._interactionBlocked||this._inputEl?.click()}_handleDragEnter(e){this._interactionBlocked||this.noDrag||(e.preventDefault(),this._dragCounter++,this._dragOver=!0)}_handleDragOver(e){this._interactionBlocked||this.noDrag||e.preventDefault()}_handleDragLeave(e){this._interactionBlocked||this.noDrag||(this._dragCounter--,this._dragCounter<=0&&(this._dragCounter=0,this._dragOver=!1))}_handleDrop(e){this._interactionBlocked||this.noDrag||(e.preventDefault(),this._dragCounter=0,this._dragOver=!1,e.dataTransfer?.files&&this._processFiles(Array.from(e.dataTransfer.files)))}_processFiles(e){if(!this._interactionBlocked){if(this.maxFiles===1){const r=e[0];if(!r)return;if(this._validateFile(r)){if(this._files.size>0){const o=this._files.keys().next().value;this.removeFile(o)}this._addFile(r)}for(const o of e.slice(1))this._rejectCount(o);return}for(const r of e){if(this._files.size>=this.maxFiles){this._rejectCount(r);continue}this._validateFile(r)&&this._addFile(r)}}}_rejectCount(e){this.emit("btu-upload-file-rejected",{file:e,reason:"count"}),m(c("upload","announceRejectedCount","File rejected: ___. Maximum file count reached.",[e.name]))}_validateFile(e){return this.accept&&!A(e,this.accept)?(this.emit("btu-upload-file-rejected",{file:e,reason:"type"}),m(c("upload","announceRejectedType","File rejected: ___. File type not accepted.",[e.name])),!1):this.maxFileSize>0&&!T(e,this.maxFileSize)?(this.emit("btu-upload-file-rejected",{file:e,reason:"size"}),m(c("upload","announceRejectedSize","File rejected: ___. File exceeds size limit.",[e.name])),!1):!0}_addFile(e){const r=crypto.randomUUID(),o={id:r,file:e,status:"pending",progress:0};this._files.set(r,o),this._milestones.set(r,new Set),this._renderItem(o),this.requestUpdate(),this.emit("btu-upload-file-added",{id:r,file:e});const s=q(e.size);m(c("upload","announceAdded","File added: ___, ___",[e.name,s]))}_reportUnknownId(e,r){const o=`no file found with id "${r}"`;this.emit("btu-upload-api-error",{method:e,id:r,reason:"unknown-id",message:o}),console.warn(`[btu-upload] ${e}: ${o}`)}_getOrReport(e,r){const o=this._files.get(r);return o||(this._reportUnknownId(e,r),null)}_renderItem(e){const r=this.querySelector(".btu-upload-list");if(!r)return;const o=document.createElement("btu-upload-item");o.setAttribute("role","listitem"),o._configure(e),r.appendChild(o),this._items.set(e.id,o)}setFileProgress(e,r){const o=this._getOrReport("setFileProgress",e);if(!o||o.status==="complete")return;const s=Number.isFinite(r)?Math.round(r):0,i=Math.min(Math.max(s,0),100);if(o.status!=="pending"&&i===o.progress)return;const n=o.status==="error"?{...o,progress:i}:{id:o.id,file:o.file,symbol:o.symbol,status:"uploading",progress:i};this._files.set(e,n),this._items.get(e)?._configure(n);const a=this._milestones.get(e);if(a&&a.size<3)for(const p of[25,50,75])i>=p&&!a.has(p)&&(a.add(p),m(c("upload","announceProgress","___ ___% uploaded",[o.file.name,String(p)])))}setFileStatus(e,r,o){const s=this._getOrReport("setFileStatus",e);if(!s)return;if(s.status==="complete"&&r!=="complete"){const l=`cannot transition from 'complete' to '${r}' for id "${e}"`;this.emit("btu-upload-api-error",{method:"setFileStatus",id:e,reason:"invalid-transition",message:l}),console.warn(`[btu-upload] setFileStatus: ${l}`);return}const{id:i,file:n,symbol:a,progress:p}=s;let d;switch(r){case"uploading":d={id:i,file:n,symbol:a,status:"uploading",progress:p};break;case"complete":d={id:i,file:n,symbol:a,status:"complete",progress:100};break;case"error":d={id:i,file:n,symbol:a,status:"error",progress:p,errorMessage:o??""};break}if(this._files.set(e,d),this._items.get(e)?._configure(d),r==="complete")m(c("upload","announceComplete","___ upload complete",[n.name]));else if(r==="error"){const l=o?.trim();m(l?c("upload","announceErrorWithDetail","___ upload failed: ___",[n.name,l]):c("upload","announceError","___ upload failed",[n.name]))}s.status!=="complete"&&r==="complete"&&this.emit("btu-upload-file-completed",{id:d.id,file:d.file})}setFileSymbol(e,r){const o=this._getOrReport("setFileSymbol",e);if(!o||o.symbol===r)return;const s={...o,symbol:r};this._files.set(e,s),this._items.get(e)?._configure(s)}removeFile(e){const r=this._getOrReport("removeFile",e);r&&(this._files.delete(e),this._milestones.delete(e),this._items.get(e)?.remove(),this._items.delete(e),this.requestUpdate(),this.emit("btu-upload-file-removed",{id:e,file:r.file}),m(c("upload","announceRemoved","File removed: ___",[r.file.name])))}getFiles(){return Array.from(this._files.values())}get _dropzoneFull(){return this.maxFiles===1?!1:this._files.size>=this.maxFiles}get _interactionBlocked(){return this.disabled||this._dropzoneFull}get _showCountPill(){return Number.isFinite(this.maxFiles)&&this.maxFiles!==1}_renderSelectButton(e){return u`<button
+      type="button"
+      class="btu-upload-dropzone-action"
+      ?disabled="${this._interactionBlocked}"
+      @click="${this._handleSelectClick}"
+    >
+      ${e}
+    </button>`}render(){const e=this._dropzoneFull,r=this.disabled,o=["btu-upload-dropzone",this._dragOver?"btu-upload-dropzone-dragover":"",r||e?"btu-upload-dropzone-disabled":""].filter(Boolean).join(" "),s=!r&&e?c("upload","dropzoneLabelFull","File upload, maximum reached"):c("upload","dropzoneLabel","File upload");return u`
+      <input
+        type="file"
+        class="sr-only"
+        tabindex="-1"
+        aria-hidden="true"
+        accept="${this.accept||B}"
+        ?multiple="${this.maxFiles!==1}"
+        ?disabled="${r}"
+        @change="${this._handleInputChange}"
+      />
+
+      <div
+        class="${o}"
+        aria-label="${s}"
+        aria-disabled="${r||e?"true":"false"}"
+        @click="${this._handleDropzoneClick}"
+        @dragenter="${this._handleDragEnter}"
+        @dragover="${this._handleDragOver}"
+        @dragleave="${this._handleDragLeave}"
+        @drop="${this._handleDrop}"
+      >
+        ${this._showCountPill?u`<span
+              class="btu-upload-dropzone-count"
+              aria-label="${c("upload","countOfMaxLabel","___ of ___ files",[this._files.size,this.maxFiles])}"
+              >${c("upload","countOfMax","___ of ___",[this._files.size,this.maxFiles])}</span
+            >`:B}
+        <div class="btu-upload-dropzone-icon">
+          <btu-icon symbol="upload-cloud" size="md"></btu-icon>
+        </div>
+        <div class="btu-upload-dropzone-prompt">
+          <span class="btu-upload-dropzone-text" aria-hidden="${this._dragOver?"true":"false"}">
+            ${this.noDrag?this._renderSelectButton(c("upload","dropzoneActionNoDrag","Select files")):u`${c("upload","dropzonePrefix","Drag and drop or")}
+                ${this._renderSelectButton(c("upload","dropzoneAction","select"))}
+                ${c("upload","dropzoneSuffix","files")}`}
+          </span>
+          ${this.noDrag?B:u`<span class="btu-upload-dropzone-drag-message" aria-hidden="${this._dragOver?"false":"true"}"
+                >${c("upload","dragOver","Drop Files Here")}</span
+              >`}
+        </div>
+      </div>
+
+      <div class="btu-upload-list" role="list" aria-label="${c("upload","listLabel","Uploaded files")}"></div>
+    `}}b([k({type:String})],f.prototype,"accept");b([k({type:Number,attribute:"max-file-size"})],f.prototype,"maxFileSize");b([k({attribute:"max-files",converter:{fromAttribute:t=>{if(t===null||t==="")return 1/0;const e=Number(t);return Number.isFinite(e)?Math.max(0,Math.floor(e)):1/0},toAttribute:t=>typeof t!="number"||!Number.isFinite(t)?null:String(t)}})],f.prototype,"maxFiles");b([k({type:Boolean,reflect:!0})],f.prototype,"disabled");b([k({type:Boolean,attribute:"no-drag"})],f.prototype,"noDrag");b([j()],f.prototype,"_dragOver");customElements.get("btu-upload")||customElements.define("btu-upload",f);const{events:H,args:W,argTypes:g}=M("btu-upload"),I=t=>{const e={};return t.dropzoneBg&&(e["--upload-dropzone-bg"]=t.dropzoneBg),t.dropzoneBorderColor&&(e["--upload-dropzone-border-color"]=t.dropzoneBorderColor),t.dropzoneBorderRadius&&(e["--upload-dropzone-border-radius"]=t.dropzoneBorderRadius),t.dropzoneHoverBg&&(e["--upload-dropzone-hover-bg"]=t.dropzoneHoverBg),t.dropzoneHoverBorderColor&&(e["--upload-dropzone-hover-border-color"]=t.dropzoneHoverBorderColor),t.dropzoneFocusRingColor&&(e["--upload-dropzone-focus-ring-color"]=t.dropzoneFocusRingColor),t.itemBg&&(e["--upload-item-bg"]=t.itemBg),t.itemBorderColor&&(e["--upload-item-border-color"]=t.itemBorderColor),t.itemActiveBorderColor&&(e["--upload-item-active-border-color"]=t.itemActiveBorderColor),t.itemCompleteBorderColor&&(e["--upload-item-complete-border-color"]=t.itemCompleteBorderColor),t.itemErrorBg&&(e["--upload-item-error-bg"]=t.itemErrorBg),t.itemErrorBorderColor&&(e["--upload-item-error-border-color"]=t.itemErrorBorderColor),e},de={title:"Components/Upload",component:"btu-upload",tags:["autodocs"],parameters:{docs:{subtitle:"btu-upload",description:{component:`
 A file upload component with drop zone and file list.
 
 The component is **presentation + file-selection only**. It handles file browsing
@@ -25,61 +75,61 @@ via imperative methods.
   <li><code>btu-upload-file-retry</code> — User clicked "Try again" on failed upload</li>
   <li><code>btu-upload-file-rejected</code> — File failed client-side validation</li>
 </ul>
-        `}},actions:{handles:B},controls:{expanded:!0}},args:{...U,accept:"","max-file-size":void 0,"max-files":void 0,disabled:!1,"no-drag":!1},argTypes:{...c,accept:{...c.accept,control:{type:"text"},description:"Accepted file types (MIME types, extensions, or comma-separated list)"},"max-file-size":{...c["max-file-size"],control:{type:"number"},description:"Maximum file size in bytes. 0 means unlimited."},"max-files":{...c["max-files"],control:{type:"number"},description:"Maximum number of files allowed. Omit for unlimited. Set to 1 for single-file mode (new selection replaces the existing file)."},disabled:{...c.disabled,control:{type:"boolean"},description:"Disables all interaction"},"no-drag":{...c["no-drag"],control:{type:"boolean"},description:"Disables drag-and-drop. File selection via click still works."},"--upload-dropzone-bg":{table:{disable:!0}},"--upload-dropzone-border-color":{table:{disable:!0}},"--upload-dropzone-border-radius":{table:{disable:!0}},"--upload-dropzone-hover-bg":{table:{disable:!0}},"--upload-dropzone-hover-border-color":{table:{disable:!0}},"--upload-dropzone-focus-ring-color":{table:{disable:!0}},"--upload-item-bg":{table:{disable:!0}},"--upload-item-border-color":{table:{disable:!0}},"--upload-item-active-border-color":{table:{disable:!0}},"--upload-item-complete-border-color":{table:{disable:!0}},"--upload-item-error-bg":{table:{disable:!0}},"--upload-item-error-border-color":{table:{disable:!0}},dropzoneBg:{name:"--upload-dropzone-bg",control:{type:"color"},description:"Drop zone background color (default: gray-25)",table:{category:"CSS Properties"}},dropzoneBorderColor:{name:"--upload-dropzone-border-color",control:{type:"color"},description:"Drop zone border color (default: gray-200)",table:{category:"CSS Properties"}},dropzoneBorderRadius:{name:"--upload-dropzone-border-radius",control:{type:"text"},description:"Drop zone border radius (default: borderRadius.lg)",table:{category:"CSS Properties"}},dropzoneHoverBg:{name:"--upload-dropzone-hover-bg",control:{type:"color"},description:"Drop zone hover background (default: gray-50)",table:{category:"CSS Properties"}},itemBg:{name:"--upload-item-bg",control:{type:"color"},description:"Item background color (default: white)",table:{category:"CSS Properties"}},itemBorderColor:{name:"--upload-item-border-color",control:{type:"color"},description:"Item border color (default: gray-200)",table:{category:"CSS Properties"}},itemErrorBg:{name:"--upload-item-error-bg",control:{type:"color"},description:"Item error background (default: error-25)",table:{category:"CSS Properties"}},itemErrorBorderColor:{name:"--upload-item-error-border-color",control:{type:"color"},description:"Item error border color (default: error-300)",table:{category:"CSS Properties"}},dropzoneHoverBorderColor:{name:"--upload-dropzone-hover-border-color",control:{type:"color"},description:"Drop zone hover border color (default: primary-300)",table:{category:"CSS Properties"}},dropzoneFocusRingColor:{name:"--upload-dropzone-focus-ring-color",control:{type:"color"},description:"Drop zone focus ring color (default: primary-100)",table:{category:"CSS Properties"}},itemActiveBorderColor:{name:"--upload-item-active-border-color",control:{type:"color"},description:"Item active/in-progress border color (default: gray-300)",table:{category:"CSS Properties"}},itemCompleteBorderColor:{name:"--upload-item-complete-border-color",control:{type:"color"},description:"Item completed border color (default: primary-500)",table:{category:"CSS Properties"}}},render:e=>{const o=F(e);return S`
+        `}},actions:{handles:H},controls:{expanded:!0}},args:{...W,accept:"","max-file-size":void 0,"max-files":void 0,disabled:!1,"no-drag":!1},argTypes:{...g,accept:{...g.accept,control:{type:"text"},description:"Accepted file types (MIME types, extensions, or comma-separated list)"},"max-file-size":{...g["max-file-size"],control:{type:"number"},description:"Maximum file size in bytes. 0 means unlimited."},"max-files":{...g["max-files"],control:{type:"number"},description:"Maximum number of files allowed. Omit for unlimited. Set to 1 for single-file mode (new selection replaces the existing file)."},disabled:{...g.disabled,control:{type:"boolean"},description:"Disables all interaction"},"no-drag":{...g["no-drag"],control:{type:"boolean"},description:"Disables drag-and-drop. File selection via click still works."},"--upload-dropzone-bg":{table:{disable:!0}},"--upload-dropzone-border-color":{table:{disable:!0}},"--upload-dropzone-border-radius":{table:{disable:!0}},"--upload-dropzone-hover-bg":{table:{disable:!0}},"--upload-dropzone-hover-border-color":{table:{disable:!0}},"--upload-dropzone-focus-ring-color":{table:{disable:!0}},"--upload-item-bg":{table:{disable:!0}},"--upload-item-border-color":{table:{disable:!0}},"--upload-item-active-border-color":{table:{disable:!0}},"--upload-item-complete-border-color":{table:{disable:!0}},"--upload-item-error-bg":{table:{disable:!0}},"--upload-item-error-border-color":{table:{disable:!0}},dropzoneBg:{name:"--upload-dropzone-bg",control:{type:"color"},description:"Drop zone background color (default: gray-25)",table:{category:"CSS Properties"}},dropzoneBorderColor:{name:"--upload-dropzone-border-color",control:{type:"color"},description:"Drop zone border color (default: gray-200)",table:{category:"CSS Properties"}},dropzoneBorderRadius:{name:"--upload-dropzone-border-radius",control:{type:"text"},description:"Drop zone border radius (default: borderRadius.lg)",table:{category:"CSS Properties"}},dropzoneHoverBg:{name:"--upload-dropzone-hover-bg",control:{type:"color"},description:"Drop zone hover background (default: gray-50)",table:{category:"CSS Properties"}},itemBg:{name:"--upload-item-bg",control:{type:"color"},description:"Item background color (default: white)",table:{category:"CSS Properties"}},itemBorderColor:{name:"--upload-item-border-color",control:{type:"color"},description:"Item border color (default: gray-200)",table:{category:"CSS Properties"}},itemErrorBg:{name:"--upload-item-error-bg",control:{type:"color"},description:"Item error background (default: error-25)",table:{category:"CSS Properties"}},itemErrorBorderColor:{name:"--upload-item-error-border-color",control:{type:"color"},description:"Item error border color (default: error-300)",table:{category:"CSS Properties"}},dropzoneHoverBorderColor:{name:"--upload-dropzone-hover-border-color",control:{type:"color"},description:"Drop zone hover border color (default: primary-300)",table:{category:"CSS Properties"}},dropzoneFocusRingColor:{name:"--upload-dropzone-focus-ring-color",control:{type:"color"},description:"Drop zone focus ring color (default: primary-100)",table:{category:"CSS Properties"}},itemActiveBorderColor:{name:"--upload-item-active-border-color",control:{type:"color"},description:"Item active/in-progress border color (default: gray-300)",table:{category:"CSS Properties"}},itemCompleteBorderColor:{name:"--upload-item-complete-border-color",control:{type:"color"},description:"Item completed border color (default: primary-500)",table:{category:"CSS Properties"}}},render:t=>{const e=I(t);return u`
       <btu-upload
-        style=${x(o)}
-        accept="${e.accept||""}"
-        max-file-size="${e["max-file-size"]||0}"
-        max-files="${E(e["max-files"])}"
-        ?disabled="${e.disabled}"
-        ?no-drag="${e["no-drag"]}"
+        style=${E(e)}
+        accept="${t.accept||""}"
+        max-file-size="${t["max-file-size"]||0}"
+        max-files="${C(t["max-files"])}"
+        ?disabled="${t.disabled}"
+        ?no-drag="${t["no-drag"]}"
       ></btu-upload>
-    `}},u={},m={args:{},render:e=>{const o=`upload-sim-${crypto.randomUUID().slice(0,8)}`,p=a=>{a.addEventListener("btu-upload-file-added",(s=>{const{id:r}=s.detail;let i=0;const t=Math.random()<.3;a.setFileStatus(r,"uploading");const d=setInterval(()=>{i+=Math.random()*15+5,i>=100?(i=100,clearInterval(d),t?a.setFileStatus(r,"error","Network error: connection timed out"):(a.setFileProgress(r,100),a.setFileStatus(r,"complete"))):a.setFileProgress(r,i)},300)})),a.addEventListener("btu-upload-file-retry",(s=>{const{id:r}=s.detail;let i=0;a.setFileStatus(r,"uploading"),a.setFileProgress(r,0);const t=setInterval(()=>{i+=Math.random()*20+10,i>=100?(i=100,clearInterval(t),a.setFileProgress(r,100),a.setFileStatus(r,"complete")):a.setFileProgress(r,i)},300)}))};return setTimeout(()=>{const s=document.getElementById(o)?.querySelector("btu-upload");s&&p(s)},100),S`
-      <div id="${o}">
+    `}},h={},y={args:{},render:t=>{const e=`upload-sim-${crypto.randomUUID().slice(0,8)}`,r=o=>{o.addEventListener("btu-upload-file-added",(s=>{const{id:i}=s.detail;let n=0;const a=Math.random()<.3;o.setFileStatus(i,"uploading");const p=setInterval(()=>{n+=Math.random()*15+5,n>=100?(n=100,clearInterval(p),a?o.setFileStatus(i,"error","Network error: connection timed out"):(o.setFileProgress(i,100),o.setFileStatus(i,"complete"))):o.setFileProgress(i,n)},300)})),o.addEventListener("btu-upload-file-retry",(s=>{const{id:i}=s.detail;let n=0;o.setFileStatus(i,"uploading"),o.setFileProgress(i,0);const a=setInterval(()=>{n+=Math.random()*20+10,n>=100?(n=100,clearInterval(a),o.setFileProgress(i,100),o.setFileStatus(i,"complete")):o.setFileProgress(i,n)},300)}))};return setTimeout(()=>{const s=document.getElementById(e)?.querySelector("btu-upload");s&&r(s)},100),u`
+      <div id="${e}">
         <btu-upload
-          style=${x(F(e))}
-          accept="${e.accept||""}"
-          max-file-size="${e["max-file-size"]||0}"
-          max-files="${E(e["max-files"])}"
-          ?disabled="${e.disabled}"
-          ?no-drag="${e["no-drag"]}"
+          style=${E(I(t))}
+          accept="${t.accept||""}"
+          max-file-size="${t["max-file-size"]||0}"
+          max-files="${C(t["max-files"])}"
+          ?disabled="${t.disabled}"
+          ?no-drag="${t["no-drag"]}"
         ></btu-upload>
       </div>
-    `}},f={args:{accept:"image/*,application/pdf","max-file-size":5242880},render:e=>{const o=`upload-log-${crypto.randomUUID().slice(0,8)}`,p=`log-${crypto.randomUUID().slice(0,8)}`,a={"btu-upload-file-added":"text-primary-600","btu-upload-file-removed":"text-gray-600","btu-upload-file-retry":"text-warning-600","btu-upload-file-rejected":"text-error-600","btu-upload-file-completed":"text-success-600"},s=i=>i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),r=(i,t,d=1)=>{let l=0;const n=Math.random()<d;i.setFileStatus(t,"uploading");const $=setInterval(()=>{l+=Math.random()*15+5,l>=100?(clearInterval($),n?i.setFileStatus(t,"error","Simulated network error"):(i.setFileProgress(t,100),i.setFileStatus(t,"complete"))):i.setFileProgress(t,l)},300)};return setTimeout(()=>{const t=document.getElementById(o)?.querySelector("btu-upload"),d=document.getElementById(p);if(!t||!d)return;const l=(n,$)=>{d.querySelector(".log-placeholder")?.remove();const I=document.createElement("div");I.className="flex gap-3 py-1 border-b border-gray-200 last:border-b-0";const k=new Date().toLocaleTimeString("en-US",{hour12:!1}),w=a[n]??"";I.innerHTML=`
-          <span class="shrink-0 text-gray-400">${k}</span>
-          <code class="shrink-0 font-semibold ${w}">${n}</code>
-          <span class="truncate text-gray-700">${s(JSON.stringify($))}</span>
-        `,d.prepend(I)};t.addEventListener("btu-upload-file-added",(n=>{l("btu-upload-file-added",{id:n.detail.id,name:n.detail.file.name,size:n.detail.file.size}),r(t,n.detail.id)})),t.addEventListener("btu-upload-file-removed",(n=>{l("btu-upload-file-removed",{id:n.detail.id,name:n.detail.file.name})})),t.addEventListener("btu-upload-file-retry",(n=>{l("btu-upload-file-retry",{id:n.detail.id,name:n.detail.file.name}),r(t,n.detail.id,0)})),t.addEventListener("btu-upload-file-rejected",(n=>{l("btu-upload-file-rejected",{name:n.detail.file.name,reason:n.detail.reason,size:n.detail.file.size})})),t.addEventListener("btu-upload-file-completed",(n=>{l("btu-upload-file-completed",{id:n.detail.id,name:n.detail.file.name})}))},100),S`
-      <div id="${o}" class="flex flex-col gap-4">
+    `}},v={args:{accept:"image/*,application/pdf","max-file-size":5242880},render:t=>{const e=`upload-log-${crypto.randomUUID().slice(0,8)}`,r=`log-${crypto.randomUUID().slice(0,8)}`,o={"btu-upload-file-added":"text-primary-600","btu-upload-file-removed":"text-gray-600","btu-upload-file-retry":"text-warning-600","btu-upload-file-rejected":"text-error-600","btu-upload-file-completed":"text-success-600"},s=n=>n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),i=(n,a,p=1)=>{let d=0;const l=Math.random()<p;n.setFileStatus(a,"uploading");const w=setInterval(()=>{d+=Math.random()*15+5,d>=100?(clearInterval(w),l?n.setFileStatus(a,"error","Simulated network error"):(n.setFileProgress(a,100),n.setFileStatus(a,"complete"))):n.setFileProgress(a,d)},300)};return setTimeout(()=>{const a=document.getElementById(e)?.querySelector("btu-upload"),p=document.getElementById(r);if(!a||!p)return;const d=(l,w)=>{p.querySelector(".log-placeholder")?.remove();const D=document.createElement("div");D.className="flex gap-3 py-1 border-b border-gray-200 last:border-b-0";const P=new Date().toLocaleTimeString("en-US",{hour12:!1}),U=o[l]??"";D.innerHTML=`
+          <span class="shrink-0 text-gray-400">${P}</span>
+          <code class="shrink-0 font-semibold ${U}">${l}</code>
+          <span class="truncate text-gray-700">${s(JSON.stringify(w))}</span>
+        `,p.prepend(D)};a.addEventListener("btu-upload-file-added",(l=>{d("btu-upload-file-added",{id:l.detail.id,name:l.detail.file.name,size:l.detail.file.size}),i(a,l.detail.id)})),a.addEventListener("btu-upload-file-removed",(l=>{d("btu-upload-file-removed",{id:l.detail.id,name:l.detail.file.name})})),a.addEventListener("btu-upload-file-retry",(l=>{d("btu-upload-file-retry",{id:l.detail.id,name:l.detail.file.name}),i(a,l.detail.id,0)})),a.addEventListener("btu-upload-file-rejected",(l=>{d("btu-upload-file-rejected",{name:l.detail.file.name,reason:l.detail.reason,size:l.detail.file.size})})),a.addEventListener("btu-upload-file-completed",(l=>{d("btu-upload-file-completed",{id:l.detail.id,name:l.detail.file.name})}))},100),u`
+      <div id="${e}" class="flex flex-col gap-4">
         <btu-upload
-          style=${x(F(e))}
-          accept="${e.accept||""}"
-          max-file-size="${e["max-file-size"]||0}"
-          max-files="${E(e["max-files"])}"
-          ?disabled="${e.disabled}"
-          ?no-drag="${e["no-drag"]}"
+          style=${E(I(t))}
+          accept="${t.accept||""}"
+          max-file-size="${t["max-file-size"]||0}"
+          max-files="${C(t["max-files"])}"
+          ?disabled="${t.disabled}"
+          ?no-drag="${t["no-drag"]}"
         ></btu-upload>
         <div class="rounded-md border border-gray-200 bg-gray-25 p-4">
           <div class="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500">Event Log</div>
-          <div id="${p}" class="max-h-64 overflow-y-auto font-mono text-xs">
+          <div id="${r}" class="max-h-64 overflow-y-auto font-mono text-xs">
             <div class="log-placeholder italic text-gray-400">No events yet. Drop files or click to upload.</div>
           </div>
         </div>
       </div>
-    `},parameters:{docs:{description:{story:'Live log of all five public events: `btu-upload-file-added`, `btu-upload-file-removed`, `btu-upload-file-retry`, `btu-upload-file-rejected`, `btu-upload-file-completed`. Accepts images and PDFs up to 5 MB — drop a `.txt` file or an oversized PDF to trigger `rejected`. Added files always fail on first attempt (surfacing the "Try again" retry UX), and the retry always succeeds — so every upload exercises the full lifecycle: added → error → retry → completed.'}}}},g={render:e=>{const o=`upload-files-${crypto.randomUUID().slice(0,8)}`;return setTimeout(()=>{const a=document.getElementById(o)?.querySelector("btu-upload");a&&requestAnimationFrame(()=>{const s=[{name:"photo-vacation.jpg",type:"image/jpeg",size:42e5,status:"complete"},{name:"quarterly-report.pdf",type:"application/pdf",size:16e6,status:"uploading",progress:40},{name:"intro-video.mp4",type:"video/mp4",size:208e6,status:"error",error:"Upload failed — server returned 503"}];for(const r of s){const i=new File([""],r.name,{type:r.type});Object.defineProperty(i,"size",{value:r.size});const t=crypto.randomUUID().slice(0,8),d={id:t,file:i,status:"pending",progress:0},l=a;l._files.set(t,d),l._milestones.set(t,new Set),l._renderItem(d),l.requestUpdate(),r.status==="complete"?a.setFileStatus(t,"complete"):r.status==="error"?a.setFileStatus(t,"error",r.error):r.status==="uploading"&&a.setFileProgress(t,r.progress??0)}})},200),S`
-      <div id="${o}">
-        <btu-upload style=${x(F(e))}></btu-upload>
+    `},parameters:{docs:{description:{story:'Live log of all five public events: `btu-upload-file-added`, `btu-upload-file-removed`, `btu-upload-file-retry`, `btu-upload-file-rejected`, `btu-upload-file-completed`. Accepts images and PDFs up to 5 MB — drop a `.txt` file or an oversized PDF to trigger `rejected`. Added files always fail on first attempt (surfacing the "Try again" retry UX), and the retry always succeeds — so every upload exercises the full lifecycle: added → error → retry → completed.'}}}},_={render:t=>{const e=`upload-files-${crypto.randomUUID().slice(0,8)}`;return setTimeout(()=>{const o=document.getElementById(e)?.querySelector("btu-upload");o&&requestAnimationFrame(()=>{const s=[{name:"photo-vacation.jpg",type:"image/jpeg",size:42e5,status:"complete"},{name:"quarterly-report.pdf",type:"application/pdf",size:16e6,status:"uploading",progress:40},{name:"intro-video.mp4",type:"video/mp4",size:208e6,status:"error",error:"Upload failed — server returned 503"}];for(const i of s){const n=new File([""],i.name,{type:i.type});Object.defineProperty(n,"size",{value:i.size});const a=crypto.randomUUID().slice(0,8),p={id:a,file:n,status:"pending",progress:0},d=o;d._files.set(a,p),d._milestones.set(a,new Set),d._renderItem(p),d.requestUpdate(),i.status==="complete"?o.setFileStatus(a,"complete"):i.status==="error"?o.setFileStatus(a,"error",i.error):i.status==="uploading"&&o.setFileProgress(a,i.progress??0)}})},200),u`
+      <div id="${e}">
+        <btu-upload style=${E(I(t))}></btu-upload>
       </div>
-    `}},b={args:{"max-files":1},parameters:{docs:{description:{story:'With `max-files="1"`, selecting a new file silently replaces the existing one. Only one file can be present at a time.'}}}},y={args:{accept:"image/*","max-file-size":5242880,"max-files":3},parameters:{docs:{description:{story:"Demonstrates client-side validation. Only images are accepted, with a 5 MB size limit and a maximum of 3 files. The drop zone hides when the limit is reached. Rejected files fire `btu-upload-file-rejected` events."}}}},v={args:{disabled:!0},parameters:{docs:{description:{story:"A grayed-out drop zone with muted text. File selection, drag-and-drop, and all action buttons are blocked."}}}},h={args:{"no-drag":!0},parameters:{docs:{description:{story:'With `no-drag`, drag-and-drop is disabled. Users can still select files by clicking the drop zone or the "select" link.'}}}},z={args:{},render:e=>S`
+    `}},z={args:{"max-files":1},parameters:{docs:{description:{story:'With `max-files="1"`, selecting a new file silently replaces the existing one. Only one file can be present at a time.'}}}},F={args:{accept:"image/*","max-file-size":5242880,"max-files":3},parameters:{docs:{description:{story:"Demonstrates client-side validation. Only images are accepted, with a 5 MB size limit and a maximum of 3 files. The drop zone hides when the limit is reached. Rejected files fire `btu-upload-file-rejected` events."}}}},x={args:{disabled:!0},parameters:{docs:{description:{story:"A grayed-out drop zone with muted text. File selection, drag-and-drop, and all action buttons are blocked."}}}},S={args:{"no-drag":!0},parameters:{docs:{description:{story:'With `no-drag`, drag-and-drop is disabled. Users can still select files by clicking the drop zone or the "select" link.'}}}},$={args:{},render:t=>u`
       <btu-upload
-        style=${x({"--upload-dropzone-bg":"oklch(96% 0.02 260)","--upload-dropzone-border-color":"oklch(80% 0.08 260)","--upload-dropzone-hover-bg":"oklch(93% 0.04 260)","--upload-dropzone-border-radius":"1rem","--upload-item-border-color":"oklch(80% 0.08 260)"})}
-        accept="${e.accept||""}"
-        max-file-size="${e["max-file-size"]||0}"
-        max-files="${E(e["max-files"])}"
-        ?disabled="${e.disabled}"
-        ?no-drag="${e["no-drag"]}"
+        style=${E({"--upload-dropzone-bg":"oklch(96% 0.02 260)","--upload-dropzone-border-color":"oklch(80% 0.08 260)","--upload-dropzone-hover-bg":"oklch(93% 0.04 260)","--upload-dropzone-border-radius":"1rem","--upload-item-border-color":"oklch(80% 0.08 260)"})}
+        accept="${t.accept||""}"
+        max-file-size="${t["max-file-size"]||0}"
+        max-files="${C(t["max-files"])}"
+        ?disabled="${t.disabled}"
+        ?no-drag="${t["no-drag"]}"
       ></btu-upload>
-    `,parameters:{docs:{description:{story:"Demonstrates theming via CSS custom properties. The drop zone uses a purple-tinted background and rounded corners, and item borders match the custom palette."}}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:"{}",...u.parameters?.docs?.source},description:{story:"Empty drop zone with all controls exposed.",...u.parameters?.docs?.description}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+    `,parameters:{docs:{description:{story:"Demonstrates theming via CSS custom properties. The drop zone uses a purple-tinted background and rounded corners, and item borders match the custom palette."}}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:"{}",...h.parameters?.docs?.source},description:{story:"Empty drop zone with all controls exposed.",...h.parameters?.docs?.description}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
   args: {},
   render: (args: Record<string, unknown>) => {
     const containerId = \`upload-sim-\${crypto.randomUUID().slice(0, 8)}\`;
@@ -151,10 +201,10 @@ via imperative methods.
       </div>
     \`;
   }
-}`,...m.parameters?.docs?.source},description:{story:`Interactive demo that simulates file upload progress.
+}`,...y.parameters?.docs?.source},description:{story:`Interactive demo that simulates file upload progress.
 
 Select files to see them upload with simulated progress. Some files will randomly
-fail to demonstrate the error state and retry flow.`,...m.parameters?.docs?.description}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+fail to demonstrate the error state and retry flow.`,...y.parameters?.docs?.description}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
   args: {
     accept: 'image/*,application/pdf',
     'max-file-size': 5_242_880 // 5 MB
@@ -285,11 +335,11 @@ fail to demonstrate the error state and retry flow.`,...m.parameters?.docs?.desc
       }
     }
   }
-}`,...f.parameters?.docs?.source},description:{story:`Interactive demo with a live log of every public event fired by the component.
+}`,...v.parameters?.docs?.source},description:{story:`Interactive demo with a live log of every public event fired by the component.
 
 Drop unsupported types or oversized files to see \`btu-upload-file-rejected\` entries.
 Add valid files to watch the full lifecycle: added → simulated upload → complete or
-error → (optional) retry → (optional) remove.`,...f.parameters?.docs?.description}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+error → (optional) retry → (optional) remove.`,...v.parameters?.docs?.description}}};_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
   render: (args: Record<string, unknown>) => {
     const containerId = \`upload-files-\${crypto.randomUUID().slice(0, 8)}\`;
     setTimeout(() => {
@@ -363,8 +413,8 @@ error → (optional) retry → (optional) remove.`,...f.parameters?.docs?.descri
       </div>
     \`;
   }
-}`,...g.parameters?.docs?.source},description:{story:`Pre-seeded with files in mixed states: complete, uploading, and error.
-Shows all icon variants across diverse MIME types.`,...g.parameters?.docs?.description}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+}`,..._.parameters?.docs?.source},description:{story:`Pre-seeded with files in mixed states: complete, uploading, and error.
+Shows all icon variants across diverse MIME types.`,..._.parameters?.docs?.description}}};z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
   args: {
     'max-files': 1
   },
@@ -375,7 +425,7 @@ Shows all icon variants across diverse MIME types.`,...g.parameters?.docs?.descr
       }
     }
   }
-}`,...b.parameters?.docs?.source},description:{story:"Single-file mode where selecting a new file replaces the existing one.",...b.parameters?.docs?.description}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+}`,...z.parameters?.docs?.source},description:{story:"Single-file mode where selecting a new file replaces the existing one.",...z.parameters?.docs?.description}}};F.parameters={...F.parameters,docs:{...F.parameters?.docs,source:{originalSource:`{
   args: {
     accept: 'image/*',
     'max-file-size': 5242880,
@@ -388,13 +438,13 @@ Shows all icon variants across diverse MIME types.`,...g.parameters?.docs?.descr
       }
     }
   }
-}`,...y.parameters?.docs?.source},description:{story:`Validation demo with restricted file types, size limit, and file count limit.
+}`,...F.parameters?.docs?.source},description:{story:`Validation demo with restricted file types, size limit, and file count limit.
 
 - Accepts only images (\`image/*\`)
 - Max file size: 5 MB
 - Max files: 3
 
-Rejected files fire \`btu-upload-file-rejected\` events (visible in the Actions panel).`,...y.parameters?.docs?.description}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+Rejected files fire \`btu-upload-file-rejected\` events (visible in the Actions panel).`,...F.parameters?.docs?.description}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
   args: {
     disabled: true
   },
@@ -405,7 +455,7 @@ Rejected files fire \`btu-upload-file-rejected\` events (visible in the Actions
       }
     }
   }
-}`,...v.parameters?.docs?.source},description:{story:"Disabled state — all interaction is blocked.",...v.parameters?.docs?.description}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+}`,...x.parameters?.docs?.source},description:{story:"Disabled state — all interaction is blocked.",...x.parameters?.docs?.description}}};S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
   args: {
     'no-drag': true
   },
@@ -416,7 +466,7 @@ Rejected files fire \`btu-upload-file-rejected\` events (visible in the Actions
       }
     }
   }
-}`,...h.parameters?.docs?.source},description:{story:"Drag-and-drop disabled — file selection via click still works.",...h.parameters?.docs?.description}}};z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
+}`,...S.parameters?.docs?.source},description:{story:"Drag-and-drop disabled — file selection via click still works.",...S.parameters?.docs?.description}}};$.parameters={...$.parameters,docs:{...$.parameters?.docs,source:{originalSource:`{
   args: {},
   render: (args: Record<string, unknown>) => {
     const styles: Record<string, string> = {
@@ -444,4 +494,4 @@ Rejected files fire \`btu-upload-file-rejected\` events (visible in the Actions
       }
     }
   }
-}`,...z.parameters?.docs?.source},description:{story:"Themed upload component using CSS custom property overrides.",...z.parameters?.docs?.description}}};const j=["Default","SimulatedUpload","EventLog","WithFiles","SingleFile","Validation","Disabled","NoDrag","CSSCustomProperties"];export{z as CSSCustomProperties,u as Default,v as Disabled,f as EventLog,h as NoDrag,m as SimulatedUpload,b as SingleFile,y as Validation,g as WithFiles,j as __namedExportsOrder,T as default};
+}`,...$.parameters?.docs?.source},description:{story:"Themed upload component using CSS custom property overrides.",...$.parameters?.docs?.description}}};const ce=["Default","SimulatedUpload","EventLog","WithFiles","SingleFile","Validation","Disabled","NoDrag","CSSCustomProperties"];export{$ as CSSCustomProperties,h as Default,x as Disabled,v as EventLog,S as NoDrag,y as SimulatedUpload,z as SingleFile,F as Validation,_ as WithFiles,ce as __namedExportsOrder,de as default};

package/dist/storybook/assets/UploadItem-CYQqNwUF.js

@@ -0,0 +1,54 @@
+import{i as v,E as $,x as l}from"./iframe-DlBK9Drk.js";import{b as C}from"./celebrate-KwPoF1K3.js";import{E as B,R as y}from"./ReadyMixin-CvX_eidU.js";import{l as r}from"./i18n-BQ-Uj-0B.js";import"./IconButton-Di5Rgs7F.js";import"./Icon-CWyJRQf7.js";import"./LinearProgress-D9ngIVlv.js";function F(e,t){if(!t||!t.trim())return!0;const s=t.split(",").map(o=>o.trim().toLowerCase()).filter(Boolean),a=e.type.toLowerCase(),n=e.name.toLowerCase();return s.some(o=>{if(o.startsWith("."))return n.endsWith(o);if(o.endsWith("/*")){const i=o.slice(0,o.indexOf("/"));return a.startsWith(i+"/")}return a===o})}function P(e,t){return t<=0?!0:e.size<=t}function S(e){if(!e)return"upload-cloud";const t=e.toLowerCase();return t.startsWith("image/")?"image":t.startsWith("video/")?"film":t.startsWith("audio/")?"music":t.startsWith("text/")||t==="application/pdf"||t==="application/msword"||t.startsWith("application/vnd.openxmlformats")?"file":"upload-cloud"}function x(e){if(e<1024)return r("upload","sizeSubKB","< 1 KB");if(e<1048576)return`${Math.round(e/1024)} ${r("upload","unitKB","KB")}`;if(e<1073741824){const i=e/1048576;return`${i>=10?Math.round(i).toString():i.toFixed(1)} ${r("upload","unitMB","MB")}`}const n=e/1073741824;return`${n>=10?Math.round(n).toString():n.toFixed(1)} ${r("upload","unitGB","GB")}`}const E={pending:"btu-upload-item-active",uploading:"btu-upload-item-active",complete:"btu-upload-item-complete",error:"btu-upload-item-error"};class M extends B(y(v)){constructor(){super(...arguments),this._state=null,this._baseClasses="",this._previousStatus=null,this._stopProgressComplete=t=>t.stopPropagation()}createRenderRoot(){return this}connectedCallback(){super.connectedCallback();const t=this.className?this.className.split(" ").filter(Boolean):[];this._baseClasses=[...t,"btu-upload-item"].join(" "),this.addEventListener("btu-linear-progress-complete",this._stopProgressComplete)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("btu-linear-progress-complete",this._stopProgressComplete)}_configure(t){this._state!==t&&(this._state=t,this.requestUpdate())}willUpdate(){if(!this._state)return;const t=this._state.status;this.className=`${this._baseClasses} ${E[t]}`,this._previousStatus!=="complete"&&t==="complete"&&this._scheduleCelebrate(),this._previousStatus=t}_scheduleCelebrate(){this.updateComplete.then(()=>{const t=this.querySelector("btu-linear-progress");if(!t)return;const s=t.getBoundingClientRect();s.width===0&&s.height===0||C({position:{x:s.right,y:s.top+s.height/2},size:120,duration:1200})})}_handleRemove(){this._state&&this.dispatchEvent(new CustomEvent("btu-upload-item-remove",{detail:{id:this._state.id},bubbles:!0,composed:!0}))}_handleRetry(){this._state&&this.dispatchEvent(new CustomEvent("btu-upload-item-retry",{detail:{id:this._state.id},bubbles:!0,composed:!0}))}render(){if(!this._state)return $;const t=this._state,{file:s,status:a,progress:n,symbol:o}=t,i=s.name,p=o||S(s.type),m=x(s.size),d=a==="error",u=a==="complete",c=u?100:n,h=u?"gray":"primary",b=a==="error"?t.errorMessage:"",f=r("upload","cancelFile","Cancel upload for ___",[i]),_=r("upload","itemCancelTooltip","Cancel"),g=r("upload","retryFile","Retry upload for ___",[i]);return l`
+      <btu-icon
+        class="${d?"btu-upload-item-icon-error":""} btu-upload-item-icon"
+        symbol="${p}"
+        size="md"
+        emphasize
+      ></btu-icon>
+      <div class="btu-upload-item-info">
+        ${d?l`
+              <span class="btu-upload-item-error-text"
+                >${b||r("upload","itemError","Upload failed")}</span
+              >
+              <span class="btu-upload-item-error-filename">${i}</span>
+              <button
+                type="button"
+                class="btu-upload-item-retry"
+                aria-label="${g}"
+                @click="${this._handleRetry}"
+              >
+                ${r("upload","itemRetry","Try again")}
+              </button>
+            `:l`
+              <span class="btu-upload-item-name">${i}</span>
+              <span class="btu-upload-item-size">${m}</span>
+              <div class="btu-upload-item-progress">
+                <btu-linear-progress
+                  progress="${c}"
+                  color="primary"
+                  thickness="${8}"
+                  aria-label="${c}%"
+                  .initialAnimation="${!1}"
+                  style="--track-color: oklch(var(--btu-theme-${h}-100))"
+                ></btu-linear-progress>
+                <span class="btu-upload-item-percent">${c}%</span>
+              </div>
+            `}
+      </div>
+      ${u?l`<btu-icon
+            class="btu-upload-item-check"
+            symbol="check"
+            size="sm"
+            emphasize="pulse"
+            aria-hidden="true"
+          ></btu-icon>`:l`<btu-icon-button
+            class="btu-upload-item-remove"
+            symbol="x-circle"
+            type="secondary-clear"
+            size="sm"
+            destructive
+            tooltip="${_}"
+            aria-label="${f}"
+            @btu-icon-button-click="${this._handleRemove}"
+          ></btu-icon-button>`}
+    `}}customElements.get("btu-upload-item")||customElements.define("btu-upload-item",M);export{x as f,F as m,P as v};

package/dist/storybook/assets/{UploadItem.stories-C19JMfmB.js → UploadItem.stories-_le7XBTV.js}

@@ -1,4 +1,4 @@
-import{g as y,x as c}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:f,argTypes:h}=y("btu-upload-item"),e=r=>{const l=`upload-item-${crypto.randomUUID().slice(0,8)}`;return setTimeout(()=>{const m=document.getElementById(l)?.querySelector("btu-upload-item");if(!m)return;const u=new File([""],r.name,{type:r.mimeType??""});Object.defineProperty(u,"size",{value:r.size??0});const p=r.status??"uploading",d={id:crypto.randomUUID().slice(0,8),file:u,symbol:r.symbol},g=p==="pending"?{...d,status:"pending",progress:0}:p==="complete"?{...d,status:"complete",progress:100}:p==="error"?{...d,status:"error",progress:r.progress??0,errorMessage:r.errorMessage??""}:{...d,status:"uploading",progress:r.progress??0};m._configure(g)},50),c`<div id="${l}" style="max-width: 480px;"><btu-upload-item></btu-upload-item></div>`},k={title:"Components/Upload/Upload Item",component:"btu-upload-item",tags:["autodocs"],parameters:{docs:{subtitle:"Individual file row rendered inside btu-upload",description:{component:`
+import{g as y,x as m}from"./iframe-DlBK9Drk.js";import"./UploadItem-CYQqNwUF.js";import"./preload-helper-PPVm8Dsz.js";import"./celebrate-KwPoF1K3.js";import"./position-CFNQy3J6.js";import"./ReadyMixin-CvX_eidU.js";import"./i18n-BQ-Uj-0B.js";import"./aria-D5THOgos.js";import"./IconButton-Di5Rgs7F.js";import"./property-Bmq4RTSP.js";import"./if-defined-DerKRcyC.js";import"./TooltipMixin-CVKslCDt.js";import"./Icon-CWyJRQf7.js";import"./LinearProgress-D9ngIVlv.js";import"./ProgressMixin-CeSrn0_P.js";const{events:b,args:f,argTypes:h}=y("btu-upload-item"),e=r=>{const c=`upload-item-${crypto.randomUUID().slice(0,8)}`;return setTimeout(()=>{const l=document.getElementById(c)?.querySelector("btu-upload-item");if(!l)return;const u=new File([""],r.name,{type:r.mimeType??""});Object.defineProperty(u,"size",{value:r.size??0});const d=r.status??"uploading",p={id:crypto.randomUUID().slice(0,8),file:u,symbol:r.symbol},g=d==="pending"?{...p,status:"pending",progress:0}:d==="complete"?{...p,status:"complete",progress:100}:d==="error"?{...p,status:"error",progress:r.progress??0,errorMessage:r.errorMessage??""}:{...p,status:"uploading",progress:r.progress??0};l._configure(g)},50),m`<div id="${c}" style="max-width: 480px;"><btu-upload-item></btu-upload-item></div>`},C={title:"Components/Upload/Upload Item",component:"btu-upload-item",tags:["autodocs"],parameters:{docs:{subtitle:"Individual file row rendered inside btu-upload",description:{component:`
 \`btu-upload-item\` renders a single file's state inside a \`btu-upload\` file list. It is an **internal sub-component** — consumers should not create, query, or modify items directly. All interaction goes through \`btu-upload\` methods (\`setFileProgress\`, \`setFileStatus\`, \`setFileSymbol\`, \`removeFile\`).
 
 These stories exist for design documentation and visual QA of each status state in isolation. In practice, items are always created, configured, and destroyed by their parent \`btu-upload\`.
@@ -18,13 +18,13 @@ These stories exist for design documentation and visual QA of each status state
   <li><code>btu-upload-item-remove</code> — bubbles to parent \`btu-upload\`, which surfaces it as the public <code>btu-upload-file-removed</code> event</li>
   <li><code>btu-upload-item-retry</code> — bubbles to parent \`btu-upload\`, which surfaces it as the public <code>btu-upload-file-retry</code> event</li>
 </ul>
-        `}},actions:{handles:b},controls:{expanded:!0}},args:{...f},argTypes:{...h}},t={render:()=>e({name:"quarterly-report.pdf",mimeType:"application/pdf",size:16e6,status:"uploading",progress:40}),parameters:{docs:{description:{story:"The default in-progress state — gray border, linear progress bar with percentage label, and a trash button for cancelling."}}}},s={render:()=>e({name:"draft-notes.txt",mimeType:"text/plain",size:2400,status:"pending",progress:0}),parameters:{docs:{description:{story:"Rendered immediately after a file is added, before the consumer has started transferring. Visually identical to the uploading state at 0%."}}}},o={render:()=>e({name:"photo-vacation.jpg",mimeType:"image/jpeg",size:42e5,status:"complete",progress:100}),parameters:{docs:{description:{story:'Success state — primary-500 border, gray progress track, and a success-tinted emphasize icon with a one-shot pulse animation. Consumer triggers via `setFileStatus(id, "complete")`.'}}}},a={render:()=>e({name:"intro-video.mp4",mimeType:"video/mp4",size:208e6,status:"error",errorMessage:"Upload failed — server returned 503"}),parameters:{docs:{description:{story:'Error state — error-tinted background and border, error icon color, plus a "Try again" link that fires `btu-upload-item-retry` (surfaced as `btu-upload-file-retry` by the parent).'}}}},n={render:()=>c`
+        `}},actions:{handles:b},controls:{expanded:!0}},args:{...f},argTypes:{...h}},t={render:()=>e({name:"quarterly-report.pdf",mimeType:"application/pdf",size:16e6,status:"uploading",progress:40}),parameters:{docs:{description:{story:"The default in-progress state — gray border, linear progress bar with percentage label, and a trash button for cancelling."}}}},s={render:()=>e({name:"draft-notes.txt",mimeType:"text/plain",size:2400,status:"pending",progress:0}),parameters:{docs:{description:{story:"Rendered immediately after a file is added, before the consumer has started transferring. Visually identical to the uploading state at 0%."}}}},o={render:()=>e({name:"photo-vacation.jpg",mimeType:"image/jpeg",size:42e5,status:"complete",progress:100}),parameters:{docs:{description:{story:'Success state — primary-500 border, gray progress track, and a success-tinted emphasize icon with a one-shot pulse animation. Consumer triggers via `setFileStatus(id, "complete")`.'}}}},a={render:()=>e({name:"intro-video.mp4",mimeType:"video/mp4",size:208e6,status:"error",errorMessage:"Upload failed — server returned 503"}),parameters:{docs:{description:{story:'Error state — error-tinted background and border, error icon color, plus a "Try again" link that fires `btu-upload-item-retry` (surfaced as `btu-upload-file-retry` by the parent).'}}}},n={render:()=>m`
     <div class="flex flex-col gap-4">
       ${e({name:"uploading.pdf",mimeType:"application/pdf",size:24e5,status:"uploading",progress:62})}
       ${e({name:"complete.jpg",mimeType:"image/jpeg",size:11e5,status:"complete",progress:100})}
       ${e({name:"failed.mp4",mimeType:"video/mp4",size:64e6,status:"error",errorMessage:"Upload failed — network unreachable"})}
     </div>
-  `,parameters:{docs:{description:{story:"Side-by-side comparison of the three terminal states: uploading, complete, error."}}}},i={render:()=>c`
+  `,parameters:{docs:{description:{story:"Side-by-side comparison of the three terminal states: uploading, complete, error."}}}},i={render:()=>m`
     <div class="flex flex-col gap-4">
       ${e({name:"photo.jpg",mimeType:"image/jpeg",size:84e4,status:"uploading",progress:30})}
       ${e({name:"clip.mp4",mimeType:"video/mp4",size:32e6,status:"uploading",progress:30})}
@@ -164,4 +164,4 @@ These stories exist for design documentation and visual QA of each status state
       }
     }
   }
-}`,...i.parameters?.docs?.source},description:{story:"One item per MIME-to-icon mapping to verify `resolveFileSymbol()` output.",...i.parameters?.docs?.description}}};const z=["Uploading","Pending","Complete","Error","AllStates","IconVariants"];export{n as AllStates,o as Complete,a as Error,i as IconVariants,s as Pending,t as Uploading,z as __namedExportsOrder,k as default};
+}`,...i.parameters?.docs?.source},description:{story:"One item per MIME-to-icon mapping to verify `resolveFileSymbol()` output.",...i.parameters?.docs?.description}}};const P=["Uploading","Pending","Complete","Error","AllStates","IconVariants"];export{n as AllStates,o as Complete,a as Error,i as IconVariants,s as Pending,t as Uploading,P as __namedExportsOrder,C as default};

package/dist/storybook/assets/{Welcome.stories-C30jg0r1.js → Welcome.stories-rramKkhd.js}

@@ -1,6 +1,6 @@
-import{S as U}from"./blocks-DLjjvsFT.js";import{e as X,f as _,E as B,r as j,x as A}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz.js";const C=()=>new J;class J{}const w=new WeakMap,k=X(class extends _{render(e){return B}update(e,[o]){const t=o!==this.G;return t&&this.G!==void 0&&this.rt(void 0),(t||this.lt!==this.ct)&&(this.G=o,this.ht=e.options?.host,this.rt(this.ct=e.element)),B}rt(e){if(this.isConnected||(e=void 0),typeof this.G=="function"){const o=this.ht??globalThis;let t=w.get(o);t===void 0&&(t=new WeakMap,w.set(o,t)),t.get(this.G)!==void 0&&this.G.call(this.ht,void 0),t.set(this.G,e),e!==void 0&&this.G.call(this.ht,e)}else this.G.value=e}get lt(){return typeof this.G=="function"?w.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}}),ee={title:"Welcome",tags:["autodocs","!dev"],parameters:{layout:"fullscreen",controls:{disable:!0},actions:{disable:!0},options:{showPanel:!1},docs:{page:()=>j.createElement("div",{className:"welcome-docs"},j.createElement(U))}}},$=[[13,52,158],[19,183,158],[99,43,176],[95,233,208],[240,67,62],[83,36,148]],d=(e,o)=>e+Math.random()*(o-e),M=e=>e[Math.floor(Math.random()*e.length)];function I(e,o){if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;const t=e.getContext("2d"),l=Array.from({length:3},()=>({x:0,y:0,rgb:M($),opacity:0,radius:d(250,350)}));let h=null;function O(){const s=5*devicePixelRatio,n=Object.assign(document.createElement("canvas"),{width:s,height:s}),r=n.getContext("2d");r.fillStyle="#000",r.arc(s/2,s/2,1.6*devicePixelRatio,0,Math.PI*2),r.fill(),h=t.createPattern(n,"repeat")}function R(){const{width:s,height:n}=e.getBoundingClientRect();e.width=s*devicePixelRatio,e.height=n*devicePixelRatio,t.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0),O()}R(),addEventListener("resize",R);const a=o?l[0]:null;a&&(a.rgb=M($),a.radius=300),(function s(){if(!e.isConnected)return;const n=e.width/devicePixelRatio,r=e.height/devicePixelRatio;t.clearRect(0,0,n,r),a&&o&&(o.active?(a.x+=(o.tx-a.x)*.06,a.y+=(o.ty-a.y)*.06,a.opacity+=(.35-a.opacity)*.08):a.opacity+=(0-a.opacity)*.04);for(const i of l){if(i.opacity<=0)continue;const[u,p,b]=i.rgb,c=t.createRadialGradient(i.x,i.y,0,i.x,i.y,i.radius);c.addColorStop(0,`rgba(${u},${p},${b},${i.opacity})`),c.addColorStop(1,`rgba(${u},${p},${b},0)`),t.fillStyle=c,t.fillRect(i.x-i.radius,i.y-i.radius,i.radius*2,i.radius*2)}h&&(t.globalCompositeOperation="destination-in",t.fillStyle=h,t.fillRect(0,0,n,r),t.globalCompositeOperation="source-over"),requestAnimationFrame(s)})();function S(s){if(!e.isConnected)return;const{width:n,height:r}=e.getBoundingClientRect(),i=300,u=m=>m<2?{x:d(.15*n,.85*n),y:m===0?-i:r+i}:{x:m===2?-i:n+i,y:d(.15*r,.85*r)},p=Math.floor(Math.random()*4),b=(p+(Math.random()<.5?2:[1,3][Math.floor(Math.random()*2)]))%4,c=u(p),z=u(b),y=z.x-c.x,x=z.y-c.y,E=Math.hypot(y,x)||1,Y=Math.min(n,r)*d(.15,.35),D=d(1.2,2.2);s.rgb=M($),s.radius=d(250,350);let P=null;const F=d(6e3,7500);(function m(G){if(!e.isConnected)return;P??=G;const f=Math.min((G-P)/F,1),L=.5-.5*Math.cos(f*Math.PI),T=Math.sin(f*D*Math.PI)*Y;s.x=c.x+y*L+-x/E*T,s.y=c.y+x*L+y/E*T,s.opacity=.35*Math.min(f/.2,1)*Math.min((1-f)/.2,1),f<1?requestAnimationFrame(m):s.opacity=0})(performance.now())}(o?l.slice(1):l).forEach((s,n)=>setTimeout(()=>{S(s),setInterval(()=>e.isConnected&&S(s),7500)},1e3+n*2500))}const q="position:absolute;inset:0;width:100%;height:100%;pointer-events:none;",N=C(),W=C(),H=C(),v={active:!1,tx:0,ty:0},g={render:()=>(queueMicrotask(()=>{const e=N.value;e&&!e.dataset.init&&(e.dataset.init="1",I(e));const o=W.value;o&&!o.dataset.init&&(o.dataset.init="1",I(o,v));const t=H.value;t&&!t.dataset.init&&(t.dataset.init="1",t.addEventListener("mousemove",l=>{const h=t.getBoundingClientRect();v.tx=l.clientX-h.left,v.ty=l.clientY-h.top,v.active=!0}),t.addEventListener("mouseleave",()=>{v.active=!1}))}),A`
+import{S as D}from"./blocks-DHnzPh43.js";import{r as T,x as j}from"./iframe-DlBK9Drk.js";import{e as M,n as w}from"./ref-BhKk4SDh.js";import"./preload-helper-PPVm8Dsz.js";const K={title:"Welcome",tags:["autodocs","!dev"],parameters:{layout:"fullscreen",controls:{disable:!0},actions:{disable:!0},options:{showPanel:!1},docs:{page:()=>T.createElement("div",{className:"welcome-docs"},T.createElement(D))}}},k=[[13,52,158],[19,183,158],[99,43,176],[95,233,208],[240,67,62],[83,36,148]],d=(e,a)=>e+Math.random()*(a-e),$=e=>e[Math.floor(Math.random()*e.length)];function A(e,a){if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;const t=e.getContext("2d"),l=Array.from({length:3},()=>({x:0,y:0,rgb:$(k),opacity:0,radius:d(250,350)}));let p=null;function O(){const i=5*devicePixelRatio,n=Object.assign(document.createElement("canvas"),{width:i,height:i}),s=n.getContext("2d");s.fillStyle="#000",s.arc(i/2,i/2,1.6*devicePixelRatio,0,Math.PI*2),s.fill(),p=t.createPattern(n,"repeat")}function R(){const{width:i,height:n}=e.getBoundingClientRect();e.width=i*devicePixelRatio,e.height=n*devicePixelRatio,t.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0),O()}R(),addEventListener("resize",R);const r=a?l[0]:null;r&&(r.rgb=$(k),r.radius=300),(function i(){if(!e.isConnected)return;const n=e.width/devicePixelRatio,s=e.height/devicePixelRatio;t.clearRect(0,0,n,s),r&&a&&(a.active?(r.x+=(a.tx-r.x)*.06,r.y+=(a.ty-r.y)*.06,r.opacity+=(.35-r.opacity)*.08):r.opacity+=(0-r.opacity)*.04);for(const o of l){if(o.opacity<=0)continue;const[u,h,v]=o.rgb,c=t.createRadialGradient(o.x,o.y,0,o.x,o.y,o.radius);c.addColorStop(0,`rgba(${u},${h},${v},${o.opacity})`),c.addColorStop(1,`rgba(${u},${h},${v},0)`),t.fillStyle=c,t.fillRect(o.x-o.radius,o.y-o.radius,o.radius*2,o.radius*2)}p&&(t.globalCompositeOperation="destination-in",t.fillStyle=p,t.fillRect(0,0,n,s),t.globalCompositeOperation="source-over"),requestAnimationFrame(i)})();function C(i){if(!e.isConnected)return;const{width:n,height:s}=e.getBoundingClientRect(),o=300,u=m=>m<2?{x:d(.15*n,.85*n),y:m===0?-o:s+o}:{x:m===2?-o:n+o,y:d(.15*s,.85*s)},h=Math.floor(Math.random()*4),v=(h+(Math.random()<.5?2:[1,3][Math.floor(Math.random()*2)]))%4,c=u(h),z=u(v),y=z.x-c.x,x=z.y-c.y,S=Math.hypot(y,x)||1,U=Math.min(n,s)*d(.15,.35),Y=d(1.2,2.2);i.rgb=$(k),i.radius=d(250,350);let P=null;const _=d(6e3,7500);(function m(E){if(!e.isConnected)return;P??=E;const f=Math.min((E-P)/_,1),L=.5-.5*Math.cos(f*Math.PI),B=Math.sin(f*Y*Math.PI)*U;i.x=c.x+y*L+-x/S*B,i.y=c.y+x*L+y/S*B,i.opacity=.35*Math.min(f/.2,1)*Math.min((1-f)/.2,1),f<1?requestAnimationFrame(m):i.opacity=0})(performance.now())}(a?l.slice(1):l).forEach((i,n)=>setTimeout(()=>{C(i),setInterval(()=>e.isConnected&&C(i),7500)},1e3+n*2500))}const I="position:absolute;inset:0;width:100%;height:100%;pointer-events:none;",q=M(),N=M(),H=M(),b={active:!1,tx:0,ty:0},g={render:()=>(queueMicrotask(()=>{const e=q.value;e&&!e.dataset.init&&(e.dataset.init="1",A(e));const a=N.value;a&&!a.dataset.init&&(a.dataset.init="1",A(a,b));const t=H.value;t&&!t.dataset.init&&(t.dataset.init="1",t.addEventListener("mousemove",l=>{const p=t.getBoundingClientRect();b.tx=l.clientX-p.left,b.ty=l.clientY-p.top,b.active=!0}),t.addEventListener("mouseleave",()=>{b.active=!1}))}),j`
       <div
-        ${k(H)}
+        ${w(H)}
         style="
           position: relative;
           display: flex;
@@ -14,7 +14,7 @@ import{S as U}from"./blocks-DLjjvsFT.js";import{e as X,f as _,E as B,r as j,x as
           background-color: var(--btu-theme-white);
         "
       >
-        <canvas ${k(N)} aria-hidden="true" style="${q}z-index:0;"></canvas>
+        <canvas ${w(q)} aria-hidden="true" style="${I}z-index:0;"></canvas>
 
         <img
           src="WelcomeBG.svg"
@@ -32,7 +32,7 @@ import{S as U}from"./blocks-DLjjvsFT.js";import{e as X,f as _,E as B,r as j,x as
           "
         />
 
-        <canvas ${k(W)} aria-hidden="true" style="${q}z-index:2;"></canvas>
+        <canvas ${w(N)} aria-hidden="true" style="${I}z-index:2;"></canvas>
 
         <div style="position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center;">
           <div
@@ -44,7 +44,7 @@ import{S as U}from"./blocks-DLjjvsFT.js";import{e as X,f as _,E as B,r as j,x as
               height: 100%;
             "
           >
-            ${[{label:"Components",path:"?path=/docs/components-avatar--docs"},{label:"CSS Plugins",path:"?path=/docs/css-plugins-button--docs"},{label:"Design System",path:"?path=/docs/design-system-colors--docs"},{label:"Utilities",path:"?path=/docs/utilities-debounce--docs"}].map(e=>A`
+            ${[{label:"Components",path:"?path=/docs/components-avatar--docs"},{label:"CSS Plugins",path:"?path=/docs/css-plugins-button--docs"},{label:"Design System",path:"?path=/docs/design-system-colors--docs"},{label:"Utilities",path:"?path=/docs/utilities-debounce--docs"}].map(e=>j`
                 <div
                   style="
                     padding: 20px 24px;
@@ -55,8 +55,8 @@ import{S as U}from"./blocks-DLjjvsFT.js";import{e as X,f as _,E as B,r as j,x as
                     cursor: pointer;
                     transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                   "
-                  @mouseenter=${o=>{const t=o.currentTarget;t.style.borderColor="oklch(var(--btu-theme-primary-700))",t.style.transform="translateY(-2px)",t.classList.add("shadow-md")}}
-                  @mouseleave=${o=>{const t=o.currentTarget;t.style.borderColor="oklch(var(--btu-theme-gray-200))",t.style.transform="none",t.classList.remove("shadow-md")}}
+                  @mouseenter=${a=>{const t=a.currentTarget;t.style.borderColor="oklch(var(--btu-theme-primary-700))",t.style.transform="translateY(-2px)",t.classList.add("shadow-md")}}
+                  @mouseleave=${a=>{const t=a.currentTarget;t.style.borderColor="oklch(var(--btu-theme-gray-200))",t.style.transform="none",t.classList.remove("shadow-md")}}
                   @click=${()=>{window.top.location.search=e.path}}
                 >
                   <div
@@ -75,6 +75,21 @@ import{S as U}from"./blocks-DLjjvsFT.js";import{e as X,f as _,E as B,r as j,x as
                 </div>
               `)}
           </div>
+          <p
+            style="
+              margin-top: 16px;
+              padding: 6px 12px;
+              border-radius: 10px;
+              background: color-mix(in oklch, var(--btu-theme-white) 85%, transparent);
+              backdrop-filter: blur(8px);
+              font-size: 0.8125rem;
+              color: oklch(var(--btu-theme-gray-600));
+            "
+          >
+            Using a coding agent? Point it at
+            <a href="./llms.txt" target="_blank" style="color: oklch(var(--btu-theme-primary-700));">llms.txt</a>, the
+            component docs in markdown.
+          </p>
         </div>
       </div>
     `)};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
@@ -208,8 +223,23 @@ import{S as U}from"./blocks-DLjjvsFT.js";import{e as X,f as _,E as B,r as j,x as
                 </div>
               \`)}
           </div>
+          <p
+            style="
+              margin-top: 16px;
+              padding: 6px 12px;
+              border-radius: 10px;
+              background: color-mix(in oklch, var(--btu-theme-white) 85%, transparent);
+              backdrop-filter: blur(8px);
+              font-size: 0.8125rem;
+              color: oklch(var(--btu-theme-gray-600));
+            "
+          >
+            Using a coding agent? Point it at
+            <a href="./llms.txt" target="_blank" style="color: oklch(var(--btu-theme-primary-700));">llms.txt</a>, the
+            component docs in markdown.
+          </p>
         </div>
       </div>
     \`;
   }
-}`,...g.parameters?.docs?.source}}};const te=["Page"];export{g as Page,te as __namedExportsOrder,ee as default};
+}`,...g.parameters?.docs?.source}}};const Q=["Page"];export{g as Page,Q as __namedExportsOrder,K as default};

package/dist/storybook/assets/Widget-elBzGg8w.css

@@ -0,0 +1 @@
+btu-widget:not(:defined)>[slot]{display:none}btu-widget:not(:defined){pointer-events:none;opacity:.5;display:block}.btu-widget__collapsible{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .2s ease,opacity .15s ease}btu-widget:state(collapsed) .btu-widget__collapsible{grid-template-rows:0fr;opacity:0}btu-widget:state(collapsed) .btu-widget__header{border-bottom-color:transparent}.btu-widget__collapse-chevron{transition:transform .2s}btu-widget:state(collapsed) .btu-widget__collapse-chevron{transform:rotate(-180deg)}.btu-widget__collapsible-inner{min-height:0px;overflow:hidden}html::view-transition-group(widget){animation-duration:.6s;animation-timing-function:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1)}html::view-transition-old(widget){opacity:0}@keyframes fade-in{0%{opacity:0}}html::view-transition-new(widget){animation:fade-in .33s linear(0,.004,.012 1%,.035,.069,.116 4.3%,.217 6.5%,.466 11.3%,.578 13.6%,.685 16.1%,.774 18.4%,.814,.851,.884,.914,.94,.962,.982,.998 29%,1.008,1.016,1.023,1.028,1.032,1.035,1.037,1.038 38.7%,1.037 40.9%,1.034 43.4%,1.016 52.7%,1.01 57%,1.005,1.002 64.9%,1 69.8%,.999 75.7%,1) both}.btu-widget__dialog::backdrop{--tw-backdrop-blur: blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:linear(0,.0025 1.75%,.0099 3.55%,.0197 4.92%,.0341 6.4%,.0533 7.84%,.0738 9.06%,.1003 10.32%,.1281 11.41%,.194 13.37%,.2714 14.97%,.344 16.05%,.4768 17.47%,.5443 18.34%,.6069 19.39%,.6604 20.61%,.7167 22.4%,.7653 24.59%,.7876 25.87%,.8083 27.28%,.8272 28.79%,.8448 30.42%,.8649 32.63%,.8833 35.06%,.9002 37.72%,.9155 40.62%,.9295 43.79%,.9421 47.24%,.9533 50.97%,.9633 54.99%,.972 59.33%,.9795 64.01%,.9909 74.43%,.9977 86.37%,1);transition-duration:.3s;transition-timing-function:cubic-bezier(0,0,.2,1);background-color:light-dark(oklch(.04 .02 278.29 / .25),oklch(.78 .01 0 / .36))}@starting-style{.btu-widget__dialog[open]::backdrop{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}@media(prefers-reduced-motion:reduce){html::view-transition-group(widget){animation-duration:.01ms}.btu-widget__collapsible{transition-property:none}.btu-widget__dialog::backdrop{transition-property:none}}