import{g as D,E as h,x as T}from"./iframe-CMPv_g6-.js";import{o as A}from"./style-map-968Ye5qo.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:k,argTypes:g}=D("btu-linear-progress"),W={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:V},controls:{expanded:!0}},args:{...k,color:"primary",thickness:8,progress:0,"initial-animation":!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"}}},"initial-animation":{...g["initial-animation"],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={};return e.customColor&&(t["--progress-color"]=e.customColor),e.customTrackColor&&(t["--track-color"]=e.customTrackColor),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["initial-animation"]}"
      style=${A(t)}
    ></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 n=document.createElement("btu-linear-progress");n.progress=0,n.color="primary",n.label="0%";const o=setInterval(()=>{t=(t+1)%101,n.progress=t,n.label=`${t}%`,t===100&&setTimeout(()=>{t=0},1e3)},100);let s=0;const r=document.createElement("btu-linear-progress");r.progress=0,r.color="teal",r.label="0/5 files",r.ariaValueText="0 of 5 files uploaded";const l=setInterval(()=>{s=(s+1)%6,r.progress=s*20,r.label=`${s}/5 files`,r.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(n),e.appendChild(r),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 n=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 r=document.createElement("button");r.textContent="Reset",r.className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600",r.onclick=()=>{e.innerHTML="",e.appendChild(t())},o.appendChild(s),o.appendChild(r),n.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),n.appendChild(l),n};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 n=document.createElement("btu-linear-progress");n.progress=0,n.color="primary",n.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)",n.addEventListener("btu-linear-progress-complete",()=>{o.textContent="Status: Complete! ✓",o.className="text-sm text-green-600 font-semibold",s.textContent=`Event Log: btu-linear-progress-complete fired at ${new Date().toLocaleTimeString()}`,s.className="text-xs text-green-600 mt-2"});let r=!1;const l=setInterval(()=>{r||(t=t+1,n.progress=t,n.label=`${t}%`,t<100&&(o.textContent="Status: In Progress...",o.className="text-sm text-gray-600"),t===100&&(r=!0,setTimeout(()=>{t=0,r=!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(n),e.appendChild(o),e.appendChild(s),e},parameters:{docs:{description:{story:"Demonstrates the btu-linear-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 n=document.createElement("h4");n.className="text-sm font-semibold text-gray-900",n.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(n),t.appendChild(o),t.appendChild(s);const r=document.createElement("div");r.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",r.appendChild(l),r.appendChild(a),r.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-linear-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(I=>{I.forEach(S=>{S.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(r),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-linear-progress-complete', () => {
      statusDiv.textContent = 'Status: Complete! ✓';
      statusDiv.className = 'text-sm text-green-600 font-semibold';
      eventLog.textContent = \`Event Log: btu-linear-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-linear-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-linear-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 O=["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,O as __namedExportsOrder,W as default};
