@brightspot/ui 1.0.1-wc.4 → 1.2.0

package/dist/storybook/assets/LinearProgress.stories-DMVolkoE.js

@@ -0,0 +1,397 @@
+import{g as I,E as h,x as T}from"./iframe-Z4F0Cgki.js";import"./preload-helper-PPVm8Dsz.js";const{events:D,args:V,argTypes:g}=I("btu-linear-progress"),k={title:"Components/Linear Progress",component:"btu-linear-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A horizontal progress bar for showing task completion",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>To show progress of a specific task with known completion percentage</li>
+  <li>For file uploads, downloads, or processing steps</li>
+  <li>When progress needs to be communicated numerically</li>
+</ul>
+        `}},actions:{handles:D},controls:{expanded:!0}},args:{...V,color:"primary",thickness:8,progress:0,initialAnimation:!0},argTypes:{...g,"--progress-color":{table:{disable:!0}},"--track-color":{table:{disable:!0}},size:{table:{disable:!0}},customSize:{table:{disable:!0}},color:{...g.color,control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"],description:"Theme color of the progress bar.",table:{category:"Attributes",defaultValue:{summary:"primary"}}},thickness:{...g.thickness,control:{type:"number",min:1,max:10},description:"Height of the progress bar.",table:{category:"Attributes",defaultValue:{summary:"8"}}},progress:{...g.progress,control:{type:"range",min:0,max:100,step:1},description:"Progress value between 0 and 100.",table:{category:"Attributes",defaultValue:{summary:"0"}}},label:{...g.label,control:{type:"text"},description:"Optional label text to display to the right of the progress bar.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},initialAnimation:{...g.initialAnimation,control:{type:"boolean"},description:"Whether to animate progress from 0 to target value when component first becomes visible in viewport. Defaults to true.",table:{category:"Attributes",defaultValue:{summary:"true"}}},ariaLabel:{...g.ariaLabel,control:{type:"text"},description:'Optional aria-label attribute for screen readers. Describes what the progress indicator represents (e.g., "File upload progress").',table:{category:"Attributes",defaultValue:{summary:"undefined"}}},ariaLabelledBy:{...g.ariaLabelledBy,control:{type:"text"},description:"Optional aria-labelledby attribute for screen readers. References the ID of an element that labels the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},ariaValueText:{...g.ariaValueText,control:{type:"text"},description:"Optional aria-valuetext attribute for screen readers. Provides human-readable text alternative for the progress value.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},completionAnnouncement:{...g.completionAnnouncement,control:{type:"text"},description:"Optional message to announce to screen readers when progress reaches 100%. If not provided, no announcement will be made on completion.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},customColor:{name:"--progress-color",control:{type:"color"},description:"Custom progress bar color - overrides the theme color",table:{category:"CSS Properties"}},customTrackColor:{name:"--track-color",control:{type:"color"},description:"Custom track/background color - overrides default gray-100",table:{category:"CSS Properties"}}},render:e=>{const t=[];e.customColor&&t.push(`--progress-color: ${e.customColor}`),e.customTrackColor&&t.push(`--track-color: ${e.customTrackColor}`);const r=t.length>0?t.join("; "):"";return T`<btu-linear-progress
+      color="${e.color}"
+      thickness="${e.thickness}"
+      progress="${e.progress}"
+      label="${e.label||h}"
+      aria-label="${e.ariaLabel||h}"
+      aria-labelledby="${e.ariaLabelledBy||h}"
+      aria-valuetext="${e.ariaValueText||h}"
+      completion-announcement="${e.completionAnnouncement||h}"
+      ?initial-animation="${e.initialAnimation}"
+      style="${r}"
+    ></btu-linear-progress>`}},v={args:{progress:25},parameters:{docs:{description:{story:"Default horizontal progress bar with primary color. Width fills the container (100%)."}}}},f={render:()=>T`<div class="flex flex-col gap-4">
+      <btu-linear-progress progress="25" color="primary"></btu-linear-progress>
+      <btu-linear-progress progress="50" color="teal"></btu-linear-progress>
+      <btu-linear-progress progress="75" color="warning"></btu-linear-progress>
+      <btu-linear-progress progress="100" color="success"></btu-linear-progress>
+    </div>`,parameters:{docs:{description:{story:"Progress bars at various completion levels (25%, 50%, 75%, 100%) with different colors. Each bar fills the container width."}}}},x={render:()=>{const e=document.createElement("div");e.className="flex flex-col gap-8";let t=0;const r=document.createElement("btu-linear-progress");r.progress=0,r.color="primary",r.label="0%";const o=setInterval(()=>{t=(t+1)%101,r.progress=t,r.label=`${t}%`,t===100&&setTimeout(()=>{t=0},1e3)},100);let s=0;const n=document.createElement("btu-linear-progress");n.progress=0,n.color="teal",n.label="0/5 files",n.ariaValueText="0 of 5 files uploaded";const l=setInterval(()=>{s=(s+1)%6,n.progress=s*20,n.label=`${s}/5 files`,n.ariaValueText=`${s} of 5 files uploaded`,s===5&&setTimeout(()=>{s=0},3e3)},3e3),a=new MutationObserver(i=>{i.forEach(p=>{p.removedNodes.forEach(d=>{(d===e||d.contains(e))&&(clearInterval(o),clearInterval(l),a.disconnect())})})});return setTimeout(()=>{e.parentNode&&a.observe(e.parentNode,{childList:!0})},0),e.appendChild(r),e.appendChild(n),e},parameters:{docs:{description:{story:`
+Animated progress bars. 
+
+Top: continuous percentage increments. 
+
+Bottom: step-based progress with 20% increments every 3 seconds and \`aria-valuetext\` for accessibility (e.g., "3 of 5 files uploaded").`}}}},y={render:()=>{let e;const t=()=>{const r=document.createElement("div"),o=document.createElement("div");o.className="flex flex-col mb-4 items-center";const s=document.createElement("h3");s.className="text-lg font-semibold mb-2",s.textContent="Scroll within the container to see progress bars animate in";const n=document.createElement("button");n.textContent="Reset",n.className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600",n.onclick=()=>{e.innerHTML="",e.appendChild(t())},o.appendChild(s),o.appendChild(n),r.appendChild(o);const l=document.createElement("div");l.style.height="150px",l.style.overflowY="auto",l.style.border="1px solid #e5e7eb",l.style.borderRadius="4px",l.style.padding="1rem";const a=document.createElement("div");a.className="flex flex-col gap-8",a.style.minHeight="150vh";const i=document.createElement("btu-linear-progress");i.progress=30,i.color="primary",i.label="30%",a.appendChild(i);const p=document.createElement("div");p.style.marginTop="30vh";const d=document.createElement("btu-linear-progress");d.progress=50,d.color="teal",d.label="50%",p.appendChild(d),a.appendChild(p);const b=document.createElement("div");b.style.marginTop="30vh";const m=document.createElement("btu-linear-progress");m.progress=75,m.color="purple",m.label="75%",b.appendChild(m),a.appendChild(b);const u=document.createElement("div");u.style.marginTop="30vh";const c=document.createElement("btu-linear-progress");return c.progress=100,c.color="success",c.label="100%",u.appendChild(c),a.appendChild(u),l.appendChild(a),r.appendChild(l),r};return e=t(),e},parameters:{docs:{description:{story:'Demonstrates the viewport animation - progress bars animate from 0 to their target value when they become visible. Scroll within the container to see each progress bar animate in. Click "Reset" to restart.'}}}},C={render:()=>{const e=document.createElement("div");e.className="flex flex-col items-start gap-4";let t=0;const r=document.createElement("btu-linear-progress");r.progress=0,r.color="primary",r.label="0%";const o=document.createElement("div");o.className="text-sm text-gray-600",o.textContent="Status: In Progress...";const s=document.createElement("div");s.className="text-xs text-gray-500 mt-2",s.textContent="Event Log: (waiting for completion)",r.addEventListener("btu-progress-complete",()=>{o.textContent="Status: Complete! ✓",o.className="text-sm text-green-600 font-semibold",s.textContent=`Event Log: btu-progress-complete fired at ${new Date().toLocaleTimeString()}`,s.className="text-xs text-green-600 mt-2"});let n=!1;const l=setInterval(()=>{n||(t=t+1,r.progress=t,r.label=`${t}%`,t<100&&(o.textContent="Status: In Progress...",o.className="text-sm text-gray-600"),t===100&&(n=!0,setTimeout(()=>{t=0,n=!1},3e3)))},50),a=new MutationObserver(i=>{i.forEach(p=>{p.removedNodes.forEach(d=>{(d===e||d.contains(e))&&(clearInterval(l),a.disconnect())})})});return setTimeout(()=>{e.parentNode&&a.observe(e.parentNode,{childList:!0})},0),e.appendChild(r),e.appendChild(o),e.appendChild(s),e},parameters:{docs:{description:{story:"Demonstrates the btu-progress-complete event that fires when progress reaches 100%. The event fires each time progress completes a cycle."}}}},E={render:()=>{const e=document.createElement("div");e.className="flex flex-col gap-8";const t=document.createElement("div");t.className="flex flex-col gap-2";const r=document.createElement("h4");r.className="text-sm font-semibold text-gray-900",r.textContent="Progress bar with aria-label";const o=document.createElement("p");o.className="text-xs text-gray-600 mb-2",o.textContent='Screen readers announce: "Page loading progress"';const s=document.createElement("btu-linear-progress");s.progress=40,s.color="primary",s.ariaLabel="Page loading progress",t.appendChild(r),t.appendChild(o),t.appendChild(s);const n=document.createElement("div");n.className="flex flex-col gap-2";const l=document.createElement("h4");l.className="text-sm font-semibold text-gray-900",l.textContent="With custom aria-valuetext";const a=document.createElement("p");a.className="text-xs text-gray-600 mb-2",a.textContent='Screen readers announce: "File upload progress, 3 of 5 files uploaded"';const i=document.createElement("btu-linear-progress");i.progress=60,i.color="teal",i.label="3/5 files",i.ariaLabel="File upload progress",i.ariaValueText="3 of 5 files uploaded",n.appendChild(l),n.appendChild(a),n.appendChild(i);const p=document.createElement("div");p.className="flex flex-col gap-2";const d=document.createElement("h4");d.className="text-sm font-semibold text-gray-900",d.textContent="With completion announcement";const b=document.createElement("p");b.className="text-xs text-gray-600 mb-2",b.textContent='Screen readers auto-announce when complete: "Installation complete!"';const m=document.createElement("div");m.className="text-xs text-gray-500 mt-2",m.textContent="Announcement status: (waiting...)";let u=0;const c=document.createElement("btu-linear-progress");c.progress=0,c.color="success",c.label="0%",c.ariaLabel="Installation progress",c.completionAnnouncement="Installation complete!",c.addEventListener("btu-progress-complete",()=>{m.textContent='Announcement status: "Installation complete!" announced at '+new Date().toLocaleTimeString(),m.className="text-xs text-green-600 mt-2"});const w=setInterval(()=>{u<100?(u+=2,c.progress=u,c.label=`${u}%`,c.ariaValueText=`${u} percent complete`):clearInterval(w)},100);p.appendChild(d),p.appendChild(b),p.appendChild(c),p.appendChild(m);const N=new MutationObserver(S=>{S.forEach(A=>{A.removedNodes.forEach(L=>{(L===e||L.contains(e))&&(clearInterval(w),N.disconnect())})})});return setTimeout(()=>{e.parentNode&&N.observe(e.parentNode,{childList:!0})},0),e.appendChild(t),e.appendChild(n),e.appendChild(p),e},parameters:{docs:{description:{story:`
+Demonstrates accessibility best practices for screen reader users:
+
+**1. Basic usage:** Set \`ariaLabel\` to describe what's progressing.
+
+**2. Detailed progress:** Combine \`ariaLabel\` (what's progressing) with \`ariaValueText\` (human-readable progress like "3 of 5 files uploaded"). 
+
+**3. Completion announcements:** Set \`completionAnnouncement\` to automatically notify screen readers when progress reaches 100%.
+        `}}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  args: {
+    progress: 25
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default horizontal progress bar with primary color. Width fills the container (100%).'
+      }
+    }
+  }
+}`,...v.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-col gap-4">
+      <btu-linear-progress progress="25" color="primary"></btu-linear-progress>
+      <btu-linear-progress progress="50" color="teal"></btu-linear-progress>
+      <btu-linear-progress progress="75" color="warning"></btu-linear-progress>
+      <btu-linear-progress progress="100" color="success"></btu-linear-progress>
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress bars at various completion levels (25%, 50%, 75%, 100%) with different colors. Each bar fills the container width.'
+      }
+    }
+  }
+}`,...f.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const container = document.createElement('div');
+    container.className = 'flex flex-col gap-8';
+
+    // First progress: continuous 0-100%
+    let progress = 0;
+    const progressEl = document.createElement('btu-linear-progress') as any;
+    progressEl.progress = 0;
+    progressEl.color = 'primary';
+    progressEl.label = '0%';
+    const interval1 = setInterval(() => {
+      progress = (progress + 1) % 101;
+      progressEl.progress = progress;
+      progressEl.label = \`\${progress}%\`;
+      if (progress === 100) {
+        setTimeout(() => {
+          progress = 0;
+        }, 1000);
+      }
+    }, 100);
+
+    // Second progress: 20% increments every 3 seconds
+    let step = 0;
+    const progressEl2 = document.createElement('btu-linear-progress') as any;
+    progressEl2.progress = 0;
+    progressEl2.color = 'teal';
+    progressEl2.label = '0/5 files';
+    progressEl2.ariaValueText = '0 of 5 files uploaded';
+    const interval2 = setInterval(() => {
+      step = (step + 1) % 6;
+      progressEl2.progress = step * 20;
+      progressEl2.label = \`\${step}/5 files\`;
+      progressEl2.ariaValueText = \`\${step} of 5 files uploaded\`;
+      if (step === 5) {
+        setTimeout(() => {
+          step = 0;
+        }, 3000);
+      }
+    }, 3000);
+
+    // Cleanup intervals when story unmounts
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        mutation.removedNodes.forEach(node => {
+          if (node === container || node.contains(container)) {
+            clearInterval(interval1);
+            clearInterval(interval2);
+            observer.disconnect();
+          }
+        });
+      });
+    });
+    setTimeout(() => {
+      if (container.parentNode) {
+        observer.observe(container.parentNode, {
+          childList: true
+        });
+      }
+    }, 0);
+    container.appendChild(progressEl);
+    container.appendChild(progressEl2);
+    return container;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`
+Animated progress bars. 
+
+Top: continuous percentage increments. 
+
+Bottom: step-based progress with 20% increments every 3 seconds and \\\`aria-valuetext\\\` for accessibility (e.g., "3 of 5 files uploaded").\`
+      }
+    }
+  }
+}`,...x.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    let rootContainer: HTMLElement;
+    const createProgressBars = () => {
+      const container = document.createElement('div');
+      const header = document.createElement('div');
+      header.className = 'flex flex-col mb-4 items-center';
+      const h3 = document.createElement('h3');
+      h3.className = 'text-lg font-semibold mb-2';
+      h3.textContent = 'Scroll within the container to see progress bars animate in';
+      const resetBtn = document.createElement('button');
+      resetBtn.textContent = 'Reset';
+      resetBtn.className = 'px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600';
+      resetBtn.onclick = () => {
+        rootContainer.innerHTML = '';
+        rootContainer.appendChild(createProgressBars());
+      };
+      header.appendChild(h3);
+      header.appendChild(resetBtn);
+      container.appendChild(header);
+      const scrollContainer = document.createElement('div');
+      scrollContainer.style.height = '150px';
+      scrollContainer.style.overflowY = 'auto';
+      scrollContainer.style.border = '1px solid #e5e7eb';
+      scrollContainer.style.borderRadius = '4px';
+      scrollContainer.style.padding = '1rem';
+      const wrapper = document.createElement('div');
+      wrapper.className = 'flex flex-col gap-8';
+      wrapper.style.minHeight = '150vh';
+      const progress1 = document.createElement('btu-linear-progress') as any;
+      progress1.progress = 30;
+      progress1.color = 'primary';
+      progress1.label = '30%';
+      wrapper.appendChild(progress1);
+      const div2 = document.createElement('div');
+      div2.style.marginTop = '30vh';
+      const progress2 = document.createElement('btu-linear-progress') as any;
+      progress2.progress = 50;
+      progress2.color = 'teal';
+      progress2.label = '50%';
+      div2.appendChild(progress2);
+      wrapper.appendChild(div2);
+      const div3 = document.createElement('div');
+      div3.style.marginTop = '30vh';
+      const progress3 = document.createElement('btu-linear-progress') as any;
+      progress3.progress = 75;
+      progress3.color = 'purple';
+      progress3.label = '75%';
+      div3.appendChild(progress3);
+      wrapper.appendChild(div3);
+      const div4 = document.createElement('div');
+      div4.style.marginTop = '30vh';
+      const progress4 = document.createElement('btu-linear-progress') as any;
+      progress4.progress = 100;
+      progress4.color = 'success';
+      progress4.label = '100%';
+      div4.appendChild(progress4);
+      wrapper.appendChild(div4);
+      scrollContainer.appendChild(wrapper);
+      container.appendChild(scrollContainer);
+      return container;
+    };
+    rootContainer = createProgressBars();
+    return rootContainer;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the viewport animation - progress bars animate from 0 to their target value when they become visible. Scroll within the container to see each progress bar animate in. Click "Reset" to restart.'
+      }
+    }
+  }
+}`,...y.parameters?.docs?.source}}};C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const container = document.createElement('div');
+    container.className = 'flex flex-col items-start gap-4';
+    let progress = 0;
+    const progressEl = document.createElement('btu-linear-progress') as any;
+    progressEl.progress = 0;
+    progressEl.color = 'primary';
+    progressEl.label = '0%';
+    const statusDiv = document.createElement('div');
+    statusDiv.className = 'text-sm text-gray-600';
+    statusDiv.textContent = 'Status: In Progress...';
+    const eventLog = document.createElement('div');
+    eventLog.className = 'text-xs text-gray-500 mt-2';
+    eventLog.textContent = 'Event Log: (waiting for completion)';
+    progressEl.addEventListener('btu-progress-complete', () => {
+      statusDiv.textContent = 'Status: Complete! ✓';
+      statusDiv.className = 'text-sm text-green-600 font-semibold';
+      eventLog.textContent = \`Event Log: btu-progress-complete fired at \${new Date().toLocaleTimeString()}\`;
+      eventLog.className = 'text-xs text-green-600 mt-2';
+    });
+    let isWaiting = false;
+    const interval = setInterval(() => {
+      if (isWaiting) return;
+      progress = progress + 1;
+      progressEl.progress = progress;
+      progressEl.label = \`\${progress}%\`;
+      if (progress < 100) {
+        statusDiv.textContent = 'Status: In Progress...';
+        statusDiv.className = 'text-sm text-gray-600';
+      }
+      if (progress === 100) {
+        isWaiting = true;
+        setTimeout(() => {
+          progress = 0;
+          isWaiting = false;
+        }, 3000);
+      }
+    }, 50);
+
+    // Cleanup interval when story unmounts
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        mutation.removedNodes.forEach(node => {
+          if (node === container || node.contains(container)) {
+            clearInterval(interval);
+            observer.disconnect();
+          }
+        });
+      });
+    });
+    setTimeout(() => {
+      if (container.parentNode) {
+        observer.observe(container.parentNode, {
+          childList: true
+        });
+      }
+    }, 0);
+    container.appendChild(progressEl);
+    container.appendChild(statusDiv);
+    container.appendChild(eventLog);
+    return container;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the btu-progress-complete event that fires when progress reaches 100%. The event fires each time progress completes a cycle.'
+      }
+    }
+  }
+}`,...C.parameters?.docs?.source}}};E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const container = document.createElement('div');
+    container.className = 'flex flex-col gap-8';
+
+    // Example 1: Basic with aria-label
+    const section1 = document.createElement('div');
+    section1.className = 'flex flex-col gap-2';
+    const heading1 = document.createElement('h4');
+    heading1.className = 'text-sm font-semibold text-gray-900';
+    heading1.textContent = 'Progress bar with aria-label';
+    const desc1 = document.createElement('p');
+    desc1.className = 'text-xs text-gray-600 mb-2';
+    desc1.textContent = 'Screen readers announce: "Page loading progress"';
+    const progress1 = document.createElement('btu-linear-progress') as any;
+    progress1.progress = 40;
+    progress1.color = 'primary';
+    progress1.ariaLabel = 'Page loading progress';
+    section1.appendChild(heading1);
+    section1.appendChild(desc1);
+    section1.appendChild(progress1);
+
+    // Example 2: With aria-valuetext
+    const section2 = document.createElement('div');
+    section2.className = 'flex flex-col gap-2';
+    const heading2 = document.createElement('h4');
+    heading2.className = 'text-sm font-semibold text-gray-900';
+    heading2.textContent = 'With custom aria-valuetext';
+    const desc2 = document.createElement('p');
+    desc2.className = 'text-xs text-gray-600 mb-2';
+    desc2.textContent = 'Screen readers announce: "File upload progress, 3 of 5 files uploaded"';
+    const progress2 = document.createElement('btu-linear-progress') as any;
+    progress2.progress = 60;
+    progress2.color = 'teal';
+    progress2.label = '3/5 files';
+    progress2.ariaLabel = 'File upload progress';
+    progress2.ariaValueText = '3 of 5 files uploaded';
+    section2.appendChild(heading2);
+    section2.appendChild(desc2);
+    section2.appendChild(progress2);
+
+    // Example 3: With completion announcement
+    const section3 = document.createElement('div');
+    section3.className = 'flex flex-col gap-2';
+    const heading3 = document.createElement('h4');
+    heading3.className = 'text-sm font-semibold text-gray-900';
+    heading3.textContent = 'With completion announcement';
+    const desc3 = document.createElement('p');
+    desc3.className = 'text-xs text-gray-600 mb-2';
+    desc3.textContent = 'Screen readers auto-announce when complete: "Installation complete!"';
+    const announceLog = document.createElement('div');
+    announceLog.className = 'text-xs text-gray-500 mt-2';
+    announceLog.textContent = 'Announcement status: (waiting...)';
+    let progress3Value = 0;
+    const progress3 = document.createElement('btu-linear-progress') as any;
+    progress3.progress = 0;
+    progress3.color = 'success';
+    progress3.label = '0%';
+    progress3.ariaLabel = 'Installation progress';
+    progress3.completionAnnouncement = 'Installation complete!';
+    progress3.addEventListener('btu-progress-complete', () => {
+      announceLog.textContent = 'Announcement status: "Installation complete!" announced at ' + new Date().toLocaleTimeString();
+      announceLog.className = 'text-xs text-green-600 mt-2';
+    });
+    const interval3 = setInterval(() => {
+      if (progress3Value < 100) {
+        progress3Value += 2;
+        progress3.progress = progress3Value;
+        progress3.label = \`\${progress3Value}%\`;
+        progress3.ariaValueText = \`\${progress3Value} percent complete\`;
+      } else {
+        clearInterval(interval3);
+      }
+    }, 100);
+    section3.appendChild(heading3);
+    section3.appendChild(desc3);
+    section3.appendChild(progress3);
+    section3.appendChild(announceLog);
+
+    // Cleanup interval when story unmounts
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        mutation.removedNodes.forEach(node => {
+          if (node === container || node.contains(container)) {
+            clearInterval(interval3);
+            observer.disconnect();
+          }
+        });
+      });
+    });
+    setTimeout(() => {
+      if (container.parentNode) {
+        observer.observe(container.parentNode, {
+          childList: true
+        });
+      }
+    }, 0);
+    container.appendChild(section1);
+    container.appendChild(section2);
+    container.appendChild(section3);
+    return container;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`
+Demonstrates accessibility best practices for screen reader users:
+
+**1. Basic usage:** Set \\\`ariaLabel\\\` to describe what's progressing.
+
+**2. Detailed progress:** Combine \\\`ariaLabel\\\` (what's progressing) with \\\`ariaValueText\\\` (human-readable progress like "3 of 5 files uploaded"). 
+
+**3. Completion announcements:** Set \\\`completionAnnouncement\\\` to automatically notify screen readers when progress reaches 100%.
+        \`
+      }
+    }
+  }
+}`,...E.parameters?.docs?.source}}};const B=["Default","DeterminateProgress","AnimatedProgress","InitialAnimation","CompletionEvent","Accessibility"];export{E as Accessibility,x as AnimatedProgress,C as CompletionEvent,v as Default,f as DeterminateProgress,y as InitialAnimation,B as __namedExportsOrder,k as default};

package/dist/storybook/assets/ReadyMixin.stories-DavcxbQ0.js

@@ -0,0 +1,55 @@
+const i={title:"Mixins/Ready Mixin",tags:["autodocs"],parameters:{docs:{description:{component:`
+\`ReadyMixin\` ensures the DOM is fully loaded **before initializing web
+components**.
+
+Prevents components from querying or manipulating DOM elements before
+they're available by deferring \`super.connectedCallback()\` until the DOM
+is ready.
+
+<h3>What ReadyMixin Does</h3>
+<ul>
+    <li>Checks document.readyState when connectedCallback() is called</li>
+    <li>DOM is ready: calls \`super.connectedCallback()\` immediately</li>
+    <li>If DOM is loading: waits for <b>DOMContentLoaded</b> event, then calls \`super.connectedCallback()\`</li>
+</ul>
+
+<h3>Mixin Composition</h3>
+
+<p>Place ReadyMixin close to LitElement in the composition chain:</p>
+
+<p> ✅ Correct - ReadyMixin near the base
+ComponentStatesMixin(EventEmitterMixin(ReadyMixin(LitElement)))</p>
+
+<p> ❌ Incorrect - ReadyMixin too far out
+ReadyMixin(ComponentStatesMixin(EventEmitterMixin(LitElement)))</p>
+
+<p>This ensures the DOM-ready check happens before other mixins'
+initialization logic.</p>
+
+<h3>Usage</h3>
+ \`\`\`typescript
+  import { ReadyMixin } from './ReadyMixin'
+
+  // Basic usage
+  class MyComponent extends ReadyMixin(LitElement) {
+    connectedCallback() {
+      super.connectedCallback()
+      // DOM is guaranteed to be ready here
+      const child = this.querySelector('.child')
+    }
+  }
+
+  // With multiple mixins
+  class NavRail extends EventEmitterMixin(ReadyMixin(LitElement)) {
+    // All mixins benefit from DOM-ready guarantee
+  }
+        `}}}},e={parameters:{docs:{description:{story:"ReadyMixin provides lifecycle behavior only. It has no visual output, so this story is empty."}}},render:()=>""};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: 'ReadyMixin provides lifecycle behavior only. It has no visual output, so this story is empty.'
+      }
+    }
+  },
+  render: () => ''
+}`,...e.parameters?.docs?.source}}};const t=["ReadyMixin"];export{e as ReadyMixin,t as __namedExportsOrder,i as default};

package/dist/storybook/assets/ScrollShadow.stories-BmwSRNje.js

@@ -0,0 +1,17 @@
+import{x as a}from"./iframe-Z4F0Cgki.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
+    <style>
+      :root {
+        --can-scroll:   ;
+      }
+    </style>
+    <div class=${["flex","gap-2","bg-gray-500",e].join(" ")}>
+      ${r.map((s,t)=>a`<div
+            class="text-md flex aspect-square h-[100px] items-center justify-center"
+            style="background:oklch(80% 50% ${Math.floor(Math.random()*710)+10});"
+          >
+            ${s}
+          </div>`)}
+    </div>
+  `},n={title:"CSS Plugins/ScrollShadow",component:"btu-scrollshadow",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-scrollshadow` utility class for adding shadows to the edges of a scrollable container once the content overflows. The shadows use our gray color palette. You can choose which shade of gray you want. The scroll container must not already use before & after pseudo elements. But, if you need to use before/after modifiers on the container, make sure you also manually set the content property to the `--whitespace` variable. This is a workaround for TWCSS automatically adding a content property to the before/after pseudo-elements, which overrides the `--whitespace` variable by default. Note: this currently only supports x-axis scrolling."},controls:{expanded:!0}},render:e=>l(e),argTypes:{theme:{control:{type:"select"},description:"Choose a shade of gray for the scroll shadow. 25 is almost white, and 900 is almost black.",options:["btu-scrollshadow-25","btu-scrollshadow-50","btu-scrollshadow-100","btu-scrollshadow-200","btu-scrollshadow-300","btu-scrollshadow-400","btu-scrollshadow-500","btu-scrollshadow-600","btu-scrollshadow-700","btu-scrollshadow-800","btu-scrollshadow-900"]}},args:{}},o={args:{}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...o.parameters?.docs?.source}}};const i=["Default"];export{o as Default,i as __namedExportsOrder,n as default};