import{g as S,E as h,x as T}from"./iframe-CMPv_g6-.js";import{o as $}from"./style-map-968Ye5qo.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:A,argTypes:u}=S("btu-circular-progress"),O={title:"Components/Circular Progress",component:"btu-circular-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A component for showing loading states or progress",description:{component:`
<h3>When to use:</h3>
<ul>
  <li>To indicate loading or processing state</li>
  <li>To show progress of a specific task</li>
  <li>For operations with known or unknown duration</li>
</ul>

<h3>Variants:</h3>
<ul>
  <li><strong>Indeterminate:</strong> Animated spinner for unknown duration (default)</li>
  <li><strong>Determinate:</strong> Shows specific progress value (0-100)</li>
</ul>
        `}},actions:{handles:V},controls:{expanded:!0}},args:{...A,indeterminate:!0,color:"primary",size:"sm",thickness:2,progress:0,"initial-animation":!0},argTypes:{...u,"--progress-color":{table:{disable:!0}},"--track-color":{table:{disable:!0}},"--progress-size":{table:{disable:!0}},indeterminate:{...u.indeterminate,control:{type:"boolean"},description:"Whether the progress indicator is indeterminate (animated spinner). When false, shows determinate progress based on the progress value.",table:{category:"Attributes",defaultValue:{summary:"true"}}},color:{...u.color,control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"],description:"Theme color of the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"primary"}}},size:{...u.size,control:{type:"select"},options:["sm","md","lg"],description:"Size variant: sm (16px), md (32px), lg (48px)",table:{category:"Attributes",defaultValue:{summary:"sm"}}},thickness:{...u.thickness,control:{type:"number",min:1,max:10},description:"Stroke width of the progress circle.",table:{category:"Attributes",defaultValue:{summary:"2"}}},progress:{...u.progress,control:{type:"range",min:0,max:100,step:1},description:"Progress value for determinate mode. Value between 0 and 100.",table:{category:"Attributes",defaultValue:{summary:"0"}}},label:{...u.label,control:{type:"text"},description:"Optional label text to display below the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},"initial-animation":{...u["initial-animation"],control:{type:"boolean"},description:"Whether to animate progress from 0 to target value when component first becomes visible in viewport. Only applies to determinate mode. Defaults to true.",table:{category:"Attributes",defaultValue:{summary:"true"}}},ariaLabel:{...u.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:{...u.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:{...u.ariaValueText,control:{type:"text"},description:"Optional aria-valuetext attribute for screen readers. Provides human-readable text alternative for the progress value in determinate mode.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},completionAnnouncement:{...u.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 indicator 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"}},customSize:{name:"--progress-size",control:{type:"number",min:1,max:100},description:"Custom size in pixels - overrides the size preset",table:{category:"css properties"}}},render:e=>{const t={};return e.customColor&&(t["--progress-color"]=e.customColor),e.customTrackColor&&(t["--track-color"]=e.customTrackColor),e.customSize&&(t["--progress-size"]=`${e.customSize}px`),T`<btu-circular-progress
      ?indeterminate=${e.indeterminate}
      color="${e.color}"
      size="${e.size}"
      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=${$(t)}
    ></btu-circular-progress>`}},f={args:{},parameters:{docs:{description:{story:"Default indeterminate spinner with primary color and small size."}}}},v={render:()=>T`<div class="flex items-center gap-4">
      <btu-circular-progress .indeterminate=${!1} progress="25" size="md" label="25%"></btu-circular-progress>
      <btu-circular-progress
        .indeterminate=${!1}
        progress="50"
        size="md"
        color="success"
        label="50%"
      ></btu-circular-progress>
      <btu-circular-progress
        .indeterminate=${!1}
        progress="75"
        size="md"
        color="warning"
        label="75%"
      ></btu-circular-progress>
      <btu-circular-progress
        .indeterminate=${!1}
        progress="100"
        size="md"
        color="success"
        label="100%"
      ></btu-circular-progress>
    </div>`,parameters:{docs:{description:{story:"Determinate progress indicators at various completion levels with labels."}}}},x={render:()=>{const e=document.createElement("div");e.className="flex items-center gap-8";let t=0;const r=document.createElement("btu-circular-progress");r.indeterminate=!1,r.progress=0,r.size="lg",r.color="primary",r.label="0%";const i=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-circular-progress");n.indeterminate=!1,n.progress=0,n.size="lg",n.color="teal",n.label="0/5",n.ariaValueText="0 of 5 steps completed";const p=setInterval(()=>{s=(s+1)%6,n.progress=s*20,n.label=`${s}/5`,n.ariaValueText=`${s} of 5 steps completed`,s===5&&setTimeout(()=>{s=0},3e3)},3e3),l=new MutationObserver(o=>{o.forEach(d=>{d.removedNodes.forEach(c=>{(c===e||c.contains(e))&&(clearInterval(i),clearInterval(p),l.disconnect())})})});return setTimeout(()=>{e.parentNode&&l.observe(e.parentNode,{childList:!0})},0),e.appendChild(r),e.appendChild(n),e},parameters:{docs:{description:{story:`
Animated determinate progress indicators. 

Left: continuous percentage increments. 

Right: step-based progress with 20% increments every 3 seconds, fractional labels, and \`aria-valuetext\` for accessibility (e.g., "3 of 5 steps completed").`}}}},y={render:()=>{let e;const t=()=>{const r=document.createElement("div"),i=document.createElement("div");i.className="flex flex-col items-center mb-4";const s=document.createElement("h3");s.className="text-lg font-semibold mb-2",s.textContent="Scroll within the container to see progress circles 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())},i.appendChild(s),i.appendChild(n),r.appendChild(i);const p=document.createElement("div");p.style.height="150px",p.style.overflowY="auto",p.style.border="1px solid #e5e7eb",p.style.borderRadius="4px",p.style.padding="1rem";const l=document.createElement("div");l.className="flex flex-col items-center gap-8",l.style.minHeight="150vh";const o=document.createElement("btu-circular-progress");o.indeterminate=!1,o.progress=30,o.size="lg",o.color="primary",o.label="30%",l.appendChild(o);const d=document.createElement("div");d.className="flex flex-col items-center",d.style.marginTop="30vh";const c=document.createElement("btu-circular-progress");c.indeterminate=!1,c.progress=50,c.size="lg",c.color="teal",c.label="50%",d.appendChild(c),l.appendChild(d);const b=document.createElement("div");b.className="flex flex-col items-center",b.style.marginTop="30vh";const m=document.createElement("btu-circular-progress");m.indeterminate=!1,m.progress=75,m.size="lg",m.color="purple",m.label="75%",b.appendChild(m),l.appendChild(b);const g=document.createElement("div");g.className="flex flex-col items-center",g.style.marginTop="30vh";const a=document.createElement("btu-circular-progress");return a.indeterminate=!1,a.progress=100,a.size="lg",a.color="success",a.label="100%",g.appendChild(a),l.appendChild(g),p.appendChild(l),r.appendChild(p),r};return e=t(),e},parameters:{docs:{description:{story:'Demonstrates the viewport animation for determinate mode - progress circles animate from 0 to their target value when they become visible. Scroll within the container to see each circle animate in. Click "Reset" to restart.'}}}},C={render:()=>{const e=document.createElement("div");e.className="flex flex-col items-center gap-4";let t=0;const r=document.createElement("btu-circular-progress");r.indeterminate=!1,r.progress=0,r.size="lg",r.color="primary",r.label="0%";const i=document.createElement("div");i.className="text-sm text-gray-600",i.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-circular-progress-complete",()=>{i.textContent="Status: Complete! ✓",i.className="text-sm text-green-600 font-semibold",s.textContent=`Event Log: btu-circular-progress-complete fired at ${new Date().toLocaleTimeString()}`,s.className="text-xs text-green-600 mt-2"});let n=!1;const p=setInterval(()=>{n||(t=t+1,r.progress=t,r.label=`${t}%`,t<100&&(i.textContent="Status: In Progress...",i.className="text-sm text-gray-600"),t===100&&(n=!0,setTimeout(()=>{t=0,n=!1},3e3)))},50),l=new MutationObserver(o=>{o.forEach(d=>{d.removedNodes.forEach(c=>{(c===e||c.contains(e))&&(clearInterval(p),l.disconnect())})})});return setTimeout(()=>{e.parentNode&&l.observe(e.parentNode,{childList:!0})},0),e.appendChild(r),e.appendChild(i),e.appendChild(s),e},parameters:{docs:{description:{story:"Demonstrates the btu-circular-progress-complete event that fires when determinate 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="Indeterminate with aria-label";const i=document.createElement("p");i.className="text-xs text-gray-600 mb-2",i.textContent='Screen readers announce: "Loading application data"';const s=document.createElement("btu-circular-progress");s.indeterminate=!0,s.size="md",s.color="primary",s.ariaLabel="Loading application data",t.appendChild(r),t.appendChild(i),t.appendChild(s);const n=document.createElement("div");n.className="flex flex-col gap-2";const p=document.createElement("h4");p.className="text-sm font-semibold text-gray-900",p.textContent="Determinate with custom aria-valuetext";const l=document.createElement("p");l.className="text-xs text-gray-600 mb-2",l.textContent='Screen readers announce: "File upload progress, 3 of 5 files uploaded"';const o=document.createElement("btu-circular-progress");o.indeterminate=!1,o.progress=60,o.size="md",o.color="teal",o.label="3/5",o.ariaLabel="File upload progress",o.ariaValueText="3 of 5 files uploaded",n.appendChild(p),n.appendChild(l),n.appendChild(o);const d=document.createElement("div");d.className="flex flex-col gap-2";const c=document.createElement("h4");c.className="text-sm font-semibold text-gray-900",c.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: "Download complete!"';const m=document.createElement("div");m.className="text-xs text-gray-500 mt-2",m.textContent="Announcement status: (waiting...)";let g=0;const a=document.createElement("btu-circular-progress");a.indeterminate=!1,a.progress=0,a.size="md",a.color="success",a.label="0%",a.ariaLabel="Download progress",a.completionAnnouncement="Download complete!",a.addEventListener("btu-circular-progress-complete",()=>{m.textContent='Announcement status: "Download complete!" announced at '+new Date().toLocaleTimeString(),m.className="text-xs text-green-600 mt-2"});const w=setInterval(()=>{g<100?(g+=2,a.progress=g,a.label=`${g}%`,a.ariaValueText=`${g} percent complete`):clearInterval(w)},100);d.appendChild(c),d.appendChild(b),d.appendChild(a),d.appendChild(m);const N=new MutationObserver(z=>{z.forEach(D=>{D.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(d),e},parameters:{docs:{description:{story:"\nDemonstrates accessibility best practices for screen reader users:\n\n**1. Indeterminate mode:** Set `ariaLabel` to describe what's loading.\n\n**2. Determinate mode:** Combine `ariaLabel` (what's progressing) with `ariaValueText` (human-readable progress like \"3 of 5 files uploaded\"). Set `completionAnnouncement` to automatically notify screen readers when progress reaches 100%.\n        "}}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
  args: {},
  parameters: {
    docs: {
      description: {
        story: 'Default indeterminate spinner with primary color and small size.'
      }
    }
  }
}`,...f.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
  render: () => html\`<div class="flex items-center gap-4">
      <btu-circular-progress .indeterminate=\${false} progress="25" size="md" label="25%"></btu-circular-progress>
      <btu-circular-progress
        .indeterminate=\${false}
        progress="50"
        size="md"
        color="success"
        label="50%"
      ></btu-circular-progress>
      <btu-circular-progress
        .indeterminate=\${false}
        progress="75"
        size="md"
        color="warning"
        label="75%"
      ></btu-circular-progress>
      <btu-circular-progress
        .indeterminate=\${false}
        progress="100"
        size="md"
        color="success"
        label="100%"
      ></btu-circular-progress>
    </div>\`,
  parameters: {
    docs: {
      description: {
        story: 'Determinate progress indicators at various completion levels with labels.'
      }
    }
  }
}`,...v.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
  render: () => {
    const container = document.createElement('div');
    container.className = 'flex items-center gap-8';

    // First progress: continuous 0-100%
    let progress = 0;
    const progressEl = document.createElement('btu-circular-progress') as any;
    progressEl.indeterminate = false;
    progressEl.progress = 0;
    progressEl.size = 'lg';
    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-circular-progress') as any;
    progressEl2.indeterminate = false;
    progressEl2.progress = 0;
    progressEl2.size = 'lg';
    progressEl2.color = 'teal';
    progressEl2.label = '0/5';
    progressEl2.ariaValueText = '0 of 5 steps completed';
    const interval2 = setInterval(() => {
      step = (step + 1) % 6;
      progressEl2.progress = step * 20;
      progressEl2.label = \`\${step}/5\`;
      progressEl2.ariaValueText = \`\${step} of 5 steps completed\`;
      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 determinate progress indicators. 

Left: continuous percentage increments. 

Right: step-based progress with 20% increments every 3 seconds, fractional labels, and \\\`aria-valuetext\\\` for accessibility (e.g., "3 of 5 steps completed").\`
      }
    }
  }
}`,...x.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
  render: () => {
    let rootContainer: HTMLElement;
    const createProgressCircles = () => {
      const container = document.createElement('div');
      const header = document.createElement('div');
      header.className = 'flex flex-col items-center mb-4';
      const h3 = document.createElement('h3');
      h3.className = 'text-lg font-semibold mb-2';
      h3.textContent = 'Scroll within the container to see progress circles 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(createProgressCircles());
      };
      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 items-center gap-8';
      wrapper.style.minHeight = '150vh';
      const progress1 = document.createElement('btu-circular-progress') as any;
      progress1.indeterminate = false;
      progress1.progress = 30;
      progress1.size = 'lg';
      progress1.color = 'primary';
      progress1.label = '30%';
      wrapper.appendChild(progress1);
      const div2 = document.createElement('div');
      div2.className = 'flex flex-col items-center';
      div2.style.marginTop = '30vh';
      const progress2 = document.createElement('btu-circular-progress') as any;
      progress2.indeterminate = false;
      progress2.progress = 50;
      progress2.size = 'lg';
      progress2.color = 'teal';
      progress2.label = '50%';
      div2.appendChild(progress2);
      wrapper.appendChild(div2);
      const div3 = document.createElement('div');
      div3.className = 'flex flex-col items-center';
      div3.style.marginTop = '30vh';
      const progress3 = document.createElement('btu-circular-progress') as any;
      progress3.indeterminate = false;
      progress3.progress = 75;
      progress3.size = 'lg';
      progress3.color = 'purple';
      progress3.label = '75%';
      div3.appendChild(progress3);
      wrapper.appendChild(div3);
      const div4 = document.createElement('div');
      div4.className = 'flex flex-col items-center';
      div4.style.marginTop = '30vh';
      const progress4 = document.createElement('btu-circular-progress') as any;
      progress4.indeterminate = false;
      progress4.progress = 100;
      progress4.size = 'lg';
      progress4.color = 'success';
      progress4.label = '100%';
      div4.appendChild(progress4);
      wrapper.appendChild(div4);
      scrollContainer.appendChild(wrapper);
      container.appendChild(scrollContainer);
      return container;
    };
    rootContainer = createProgressCircles();
    return rootContainer;
  },
  parameters: {
    docs: {
      description: {
        story: 'Demonstrates the viewport animation for determinate mode - progress circles animate from 0 to their target value when they become visible. Scroll within the container to see each circle 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-center gap-4';
    let progress = 0;
    const progressEl = document.createElement('btu-circular-progress') as any;
    progressEl.indeterminate = false;
    progressEl.progress = 0;
    progressEl.size = 'lg';
    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-circular-progress-complete', () => {
      statusDiv.textContent = 'Status: Complete! ✓';
      statusDiv.className = 'text-sm text-green-600 font-semibold';
      eventLog.textContent = \`Event Log: btu-circular-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-circular-progress-complete event that fires when determinate 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: Indeterminate 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 = 'Indeterminate with aria-label';
    const desc1 = document.createElement('p');
    desc1.className = 'text-xs text-gray-600 mb-2';
    desc1.textContent = 'Screen readers announce: "Loading application data"';
    const progress1 = document.createElement('btu-circular-progress') as any;
    progress1.indeterminate = true;
    progress1.size = 'md';
    progress1.color = 'primary';
    progress1.ariaLabel = 'Loading application data';
    section1.appendChild(heading1);
    section1.appendChild(desc1);
    section1.appendChild(progress1);

    // Example 2: Determinate 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 = 'Determinate 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-circular-progress') as any;
    progress2.indeterminate = false;
    progress2.progress = 60;
    progress2.size = 'md';
    progress2.color = 'teal';
    progress2.label = '3/5';
    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: "Download 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-circular-progress') as any;
    progress3.indeterminate = false;
    progress3.progress = 0;
    progress3.size = 'md';
    progress3.color = 'success';
    progress3.label = '0%';
    progress3.ariaLabel = 'Download progress';
    progress3.completionAnnouncement = 'Download complete!';
    progress3.addEventListener('btu-circular-progress-complete', () => {
      announceLog.textContent = 'Announcement status: "Download 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. Indeterminate mode:** Set \\\`ariaLabel\\\` to describe what's loading.

**2. Determinate mode:** Combine \\\`ariaLabel\\\` (what's progressing) with \\\`ariaValueText\\\` (human-readable progress like "3 of 5 files uploaded"). Set \\\`completionAnnouncement\\\` to automatically notify screen readers when progress reaches 100%.
        \`
      }
    }
  }
}`,...E.parameters?.docs?.source}}};const W=["Default","DeterminateProgress","AnimatedProgress","InitialAnimation","CompletionEvent","Accessibility"];export{E as Accessibility,x as AnimatedProgress,C as CompletionEvent,f as Default,v as DeterminateProgress,y as InitialAnimation,W as __namedExportsOrder,O as default};
