@brightspot/ui 1.1.0 → 1.2.0

package/dist/storybook/assets/Button.stories-N66xrq4q.js

@@ -0,0 +1,63 @@
+import{x as c}from"./iframe-Z4F0Cgki.js";import"./preload-helper-PPVm8Dsz.js";const v=({color:r="primary",pressed:l,fill:d,contained:u,outlined:p,size:a="sm",label:b,icon:i,hideText:m,disabled:h})=>{const g=d?"":"btu-button-fill-none",y=u?"":"btu-button-container-none",f=p?"btu-button-outline":"",x=m?"btu-button-text-hidden":"";return c`
+    <button
+      type="button"
+      class=${["btu-button",`btu-button-${r}`,`btu-button-${a}`,g,y,f,x].join(" ")}
+      ?disabled=${h}
+      aria-pressed=${l?"true":"false"}
+    >
+      ${i?c`<btu-icon symbol=${i} size=${a}></btu-icon>`:""} ${b}
+    </button>
+  `},I=["ai","black","white","primary","teal","gray","purple","rose","error","warning","success"],T={title:"CSS Plugins/Button",component:"btu-button",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-button` utility class for styling buttons. Use it on `<button>` elements preferably, but it can also be used on `<a>` or other clickable elements. The plugin includes variants for different colors, sizes, and styles such as filled, outlined, and contained buttons."},controls:{expanded:!0}},render:r=>v(r),argTypes:{color:{control:{type:"select"},options:I},contained:{control:{type:"boolean"},description:"Does the button have a container?"},disabled:{control:{type:"boolean"},description:"Is the button disabled?"},fill:{control:{type:"boolean"},description:"Is the button filled?"},hideText:{control:{type:"boolean"},description:"Icon only mode (hides label)"},icon:{control:{type:"text"},description:'Lucide icon name (e.g., "search", "smile", "check")'},label:{control:{type:"text"},description:"Button label text"},outlined:{control:{type:"boolean"},description:"Is the button outlined?"},pressed:{control:{type:"boolean"},description:"Is the button pressed?"},size:{control:{type:"select"},options:["sm","md","lg","xl","2xl"]}},args:{color:"primary",contained:!0,disabled:!1,fill:!0,hideText:!1,icon:"",label:"Button",outlined:!1,pressed:!1,size:"md"}},e={args:{}},t={args:{label:"Search",icon:"search"},parameters:{docs:{description:{story:"Button with an icon alongside text. Uses the `<btu-icon>` component."}}}},o={args:{icon:"smile",hideText:!0},parameters:{docs:{description:{story:"Icon-only button. Uses `btu-button-text-hidden` to hide the label and `<btu-icon>` for the icon."}}}},s={args:{label:"Disabled Button",disabled:!0},parameters:{docs:{description:{story:"Disabled button state. Uses the `[disabled]` attribute to trigger disabled styling with reduced opacity and pointer events disabled."}}}},n={args:{label:"Active Button",pressed:!0,fill:!1,icon:"check",hideText:!0},parameters:{docs:{description:{story:'Active/pressed button state. Uses `[aria-pressed="true"]` attribute to trigger the pressed styling, typically used for toggle buttons or to show an active state.'}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...e.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Search',
+    icon: 'search'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Button with an icon alongside text. Uses the \\\`<btu-icon>\\\` component.\`
+      }
+    }
+  }
+}`,...t.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    icon: 'smile',
+    hideText: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Icon-only button. Uses \\\`btu-button-text-hidden\\\` to hide the label and \\\`<btu-icon>\\\` for the icon.\`
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Disabled Button',
+    disabled: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Disabled button state. Uses the \\\`[disabled]\\\` attribute to trigger disabled styling with reduced opacity and pointer events disabled.\`
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Active Button',
+    pressed: true,
+    fill: false,
+    icon: 'check',
+    hideText: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Active/pressed button state. Uses \\\`[aria-pressed="true"]\\\` attribute to trigger the pressed styling, typically used for toggle buttons or to show an active state.\`
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};const w=["Default","WithIcon","IconOnly","Disabled","ActivePressed"];export{n as ActivePressed,e as Default,s as Disabled,o as IconOnly,t as WithIcon,w as __namedExportsOrder,T as default};

package/dist/storybook/assets/CircularProgress.stories-zWyELtfc.js

@@ -0,0 +1,451 @@
+import{g as D,E as h,x as T}from"./iframe-Z4F0Cgki.js";import"./preload-helper-PPVm8Dsz.js";const{events:A,args:$,argTypes:u}=D("btu-circular-progress"),k={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:A},controls:{expanded:!0}},args:{...$,indeterminate:!0,color:"primary",size:"sm",thickness:2,progress:0,initialAnimation:!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"}}},initialAnimation:{...u.initialAnimation,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=[];e.customColor&&t.push(`--progress-color: ${e.customColor}`),e.customTrackColor&&t.push(`--track-color: ${e.customTrackColor}`),e.customSize&&t.push(`--progress-size: ${e.customSize}px`);const r=t.length>0?t.join("; "):"";return 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.initialAnimation}"
+      style="${r}"
+    ></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-progress-complete",()=>{i.textContent="Status: Complete! ✓",i.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 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-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-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(S=>{S.forEach(z=>{z.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-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 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-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 P=["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,P as __namedExportsOrder,k as default};