@brightspot/ui 1.5.0 → 1.7.0

package/dist/storybook/assets/{Events.stories-DDmydlh_.js → Events.stories-DS6UC9dZ.js}

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
+import{x as d}from"./iframe-CM6gBkqA.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
 <h3>EventEmitterMixin Events</h3>
 
 <p>All Brightspot UI components that extend EventEmitterMixin emit the following lifecycle events in addition to those inherited from LitElement. These events use CustomEvent and bubble through the DOM with <code>composed: true</code>, meaning they cross shadow DOM boundaries.</p>

package/dist/storybook/assets/{Heading.stories-BLGfko-i.js → Heading.stories-CAQfEGE2.js}

@@ -1,3 +1,3 @@
-import{x as s}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,o={title:"CSS Plugins/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-heading` utility class for styling headings. It supports five different sizes, from 1 (largest) to 5 (smallest). Apply the class to `<h1>` through `<h5>` elements to style them accordingly."},controls:{expanded:!0}},render:t=>r(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+import{x as s}from"./iframe-CM6gBkqA.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,o={title:"CSS Plugins/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-heading` utility class for styling headings. It supports five different sizes, from 1 (largest) to 5 (smallest). Apply the class to `<h1>` through `<h5>` elements to style them accordingly."},controls:{expanded:!0}},render:t=>r(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
   args: {}
 }`,...e.parameters?.docs?.source}}};const n=["Default"];export{e as Default,n as __namedExportsOrder,o as default};

package/dist/storybook/assets/{Icon.stories-BHnAGcFF.js → Icon.stories-C7msWlHs.js}

@@ -1,4 +1,4 @@
-import{g as d,x as r}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz.js";const p="0.508.0",b={version:p},l=b.version,{events:u,args:m,argTypes:t}=d("btu-icon"),g=["xs","sm","md","lg","xl"],x=["ai","error","gray","primary","purple","rose","success","teal","warning"],v={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"An icon component using Lucide icons with built-in support for custom colors and sizes.",description:{component:`
+import{g as c,x as a}from"./iframe-CM6gBkqA.js";import{o as d}from"./style-map-BJGdSb_D.js";import"./preload-helper-PPVm8Dsz.js";const p="0.508.0",b={version:p},l=b.version,{events:u,args:m,argTypes:t}=c("btu-icon"),g=["xs","sm","md","lg","xl"],x=["ai","error","gray","primary","purple","rose","success","teal","warning"],h={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"An icon component using Lucide icons with built-in support for custom colors and sizes.",description:{component:`
 <strong>When to use:</strong>
 <ul>
   <li>To visually reinforce actions, states, or categories</li>
@@ -15,18 +15,18 @@ import{g as d,x as r}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz
 
 <h3>Icon Library:</h3>
 <p>All icons are from <a href="https://lucide.dev/icons/" target="_blank">Lucide</a>. Note that the Lucide library is updated regularly, but the Brightspot UI library uses <strong>Lucide v${l}</strong>. Keep this in mind when choosing icons for your project, as icon names and styles may differ between versions.</p>
-        `}},actions:{handles:u},controls:{expanded:!0}},args:{...m,symbol:"heart",size:"md"},argTypes:{...t,"--Icon-size":{table:{disable:!0}},"--Icon-fill":{table:{disable:!0}},"--Icon-svg":{table:{disable:!0}},symbol:{...t.symbol,control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name. Note that only icons available in Lucide v'+l+" are supported.",table:{...t.symbol?.table,type:{summary:"string"}}},size:{...t.size,control:{type:"select"},options:g,description:"Icon size preset"},gradient:{...t.gradient,control:{type:"select"},options:x,description:"Gradient theme icon fill. When not set, icon inherits parent text color."},customSize:{name:"--Icon-size",control:{type:"text"},description:'Custom icon size - overrides the size preset (e.g., "3rem", "48px")',table:{category:"CSS Properties"}},customFill:{name:"--Icon-fill",control:{type:"text"},description:'An advanced option for creating filled-in icons via built-in CSS SVG styling. Works best with simple icons like "heart" or "star".',table:{category:"CSS Properties"}}},render:e=>{const s=[];e.customSize&&s.push(`--Icon-size: ${e.customSize}`),e.customFill&&s.push(`--Icon-fill: ${e.customFill}`);const c=s.length>0?s.join("; "):"";return r`<btu-icon
+        `}},actions:{handles:u},controls:{expanded:!0}},args:{...m,symbol:"heart",size:"md"},argTypes:{...t,"--Icon-size":{table:{disable:!0}},"--Icon-fill":{table:{disable:!0}},"--Icon-svg":{table:{disable:!0}},symbol:{...t.symbol,control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name. Note that only icons available in Lucide v'+l+" are supported.",table:{...t.symbol?.table,type:{summary:"string"}}},size:{...t.size,control:{type:"select"},options:g,description:"Icon size preset"},gradient:{...t.gradient,control:{type:"select"},options:x,description:"Gradient theme icon fill. When not set, icon inherits parent text color."},customSize:{name:"--Icon-size",control:{type:"text"},description:'Custom icon size - overrides the size preset (e.g., "3rem", "48px")',table:{category:"CSS Properties"}},customFill:{name:"--Icon-fill",control:{type:"text"},description:'An advanced option for creating filled-in icons via built-in CSS SVG styling. Works best with simple icons like "heart" or "star".',table:{category:"CSS Properties"}}},render:e=>{const r={};return e.customSize&&(r["--Icon-size"]=e.customSize),e.customFill&&(r["--Icon-fill"]=e.customFill),a`<btu-icon
       symbol="${e.symbol}"
       size="${e.size}"
       gradient="${e.gradient||""}"
-      style="${c}"
-    ></btu-icon>`}},n={args:{}},i={render:()=>r`<div class="flex items-center gap-4">
+      style=${d(r)}
+    ></btu-icon>`}},s={args:{}},n={render:()=>a`<div class="flex items-center gap-4">
       <btu-icon symbol="heart" size="xs"></btu-icon>
       <btu-icon symbol="heart" size="sm"></btu-icon>
       <btu-icon symbol="heart" size="md"></btu-icon>
       <btu-icon symbol="heart" size="lg"></btu-icon>
       <btu-icon symbol="heart" size="xl"></btu-icon>
-    </div>`,parameters:{docs:{description:{story:"Icons come in five preset sizes: xs, sm, md, lg, and xl. Choose the size that best fits your design context."}}}},o={render:()=>r`<div class="flex flex-wrap items-center justify-between gap-4 px-4">
+    </div>`,parameters:{docs:{description:{story:"Icons come in five preset sizes: xs, sm, md, lg, and xl. Choose the size that best fits your design context."}}}},i={render:()=>a`<div class="flex flex-wrap items-center justify-between gap-4 px-4">
       <div class="flex flex-col items-center gap-2">
         <btu-icon symbol="zap" size="xl" gradient="primary"></btu-icon>
         <span class="text-xs font-bold">primary</span>
@@ -59,7 +59,7 @@ import{g as d,x as r}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz
         <btu-icon symbol="flower" size="xl" gradient="rose"></btu-icon>
         <span class="text-xs font-bold">rose</span>
       </div>
-    </div>`,parameters:{docs:{description:{story:"Icons support gradient fills using the following theme colors. Set the `gradient` attribute to one of the theme colors and watch the icon's color come to life! Note that gradient icons use mask-based rendering for smooth color transitions."}}}},a={render:()=>r`<div class="flex flex-col gap-6">
+    </div>`,parameters:{docs:{description:{story:"Icons support gradient fills using the following theme colors. Set the `gradient` attribute to one of the theme colors and watch the icon's color come to life! Note that gradient icons use mask-based rendering for smooth color transitions."}}}},o={render:()=>a`<div class="flex flex-col gap-6">
       <div class="flex items-center gap-2">
         <strong>Custom sizing:</strong>
         <btu-icon symbol="trophy" size="md" style="--Icon-size: 4rem" class="text-warning-500"></btu-icon>
@@ -112,9 +112,9 @@ import{g as d,x as r}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz
           <span class="ml-1">Favorite</span>
         </button>
       </div>
-    </div>`,parameters:{docs:{description:{story:'\n- **Custom sizing** is available via the `--Icon-size` CSS property for precise control. \n- You can create **filled icons** by setting the `--Icon-fill: currentColor` CSS property. Note that this works best with simple icons like "heart" or "star".\n\n- **RTL language support:** Directional icons can be flipped for right-to-left languages using Tailwind\'s `rtl:-scale-x-100` utility class. This ensures icons like panels, arrows, and navigation elements point in the correct direction.\n\n**Accessibility best practices:**\n- If an icon conveys information and there is no visible text to accompany it (e.g., a delete button with only a trash can icon), add an `aria-label` attribute to the component to help users using screen readers understand its purpose.\n- If an icon is purely decorative (e.g. a sparkle icon, accompanying text that already conveys meaning), add `aria-hidden="true"` to the icon to hide it from screen readers.\n- You may consider adding a tooltip (via `title` attribute) to icon buttons for better discoverability.'}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+    </div>`,parameters:{docs:{description:{story:'\n- **Custom sizing** is available via the `--Icon-size` CSS property for precise control. \n- You can create **filled icons** by setting the `--Icon-fill: currentColor` CSS property. Note that this works best with simple icons like "heart" or "star".\n\n- **RTL language support:** Directional icons can be flipped for right-to-left languages using Tailwind\'s `rtl:-scale-x-100` utility class. This ensures icons like panels, arrows, and navigation elements point in the correct direction.\n\n**Accessibility best practices:**\n- If an icon conveys information and there is no visible text to accompany it (e.g., a delete button with only a trash can icon), add an `aria-label` attribute to the component to help users using screen readers understand its purpose.\n- If an icon is purely decorative (e.g. a sparkle icon, accompanying text that already conveys meaning), add `aria-hidden="true"` to the icon to hide it from screen readers.\n- You may consider adding a tooltip (via `title` attribute) to icon buttons for better discoverability.'}}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   args: {}
-}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+}`,...s.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
   render: () => html\`<div class="flex items-center gap-4">
       <btu-icon symbol="heart" size="xs"></btu-icon>
       <btu-icon symbol="heart" size="sm"></btu-icon>
@@ -129,7 +129,7 @@ import{g as d,x as r}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...i.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
   render: () => html\`<div class="flex flex-wrap items-center justify-between gap-4 px-4">
       <div class="flex flex-col items-center gap-2">
         <btu-icon symbol="zap" size="xl" gradient="primary"></btu-icon>
@@ -171,7 +171,7 @@ import{g as d,x as r}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...o.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+}`,...i.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
   render: () => html\`<div class="flex flex-col gap-6">
       <div class="flex items-center gap-2">
         <strong>Custom sizing:</strong>
@@ -242,4 +242,4 @@ import{g as d,x as r}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...a.parameters?.docs?.source}}};const h=["Default","Sizes","GradientIcons","AdvancedUsage"];export{a as AdvancedUsage,n as Default,o as GradientIcons,i as Sizes,h as __namedExportsOrder,v as default};
+}`,...o.parameters?.docs?.source}}};const z=["Default","Sizes","GradientIcons","AdvancedUsage"];export{o as AdvancedUsage,s as Default,i as GradientIcons,n as Sizes,z as __namedExportsOrder,h as default};

package/dist/storybook/assets/{LinearProgress.stories-Dx26a0P_.js → LinearProgress.stories-DBGJ5a2-.js}

@@ -1,11 +1,11 @@
-import{g as I,E as h,x as T}from"./iframe-CcloOV09.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:`
+import{g as D,E as h,x as T}from"./iframe-CM6gBkqA.js";import{o as A}from"./style-map-BJGdSb_D.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:P,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: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
+        `}},actions:{handles:V},controls:{expanded:!0}},args:{...P,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}"
@@ -14,19 +14,19 @@ import{g as I,E as h,x as T}from"./iframe-CcloOV09.js";import"./preload-helper-P
       aria-labelledby="${e.ariaLabelledBy||h}"
       aria-valuetext="${e.ariaValueText||h}"
       completion-announcement="${e.completionAnnouncement||h}"
-      ?initial-animation="${e.initialAnimation}"
-      style="${r}"
+      ?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 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:`
+    </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 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:`
+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-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 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-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-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(I=>{I.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.
@@ -394,4 +394,4 @@ Demonstrates accessibility best practices for screen reader users:
       }
     }
   }
-}`,...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};
+}`,...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};

package/dist/storybook/assets/Pagination.stories-C58bGOdf.js

@@ -0,0 +1,272 @@
+import{g as m,x as o}from"./iframe-CM6gBkqA.js";import{o as c}from"./style-map-BJGdSb_D.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:h,argTypes:y}=m("btu-pagination"),u=t=>{const a={};return t.customBackgroundColor&&(a["--pagination-color-background"]=t.customBackgroundColor),t.customForegroundColor&&(a["--pagination-color-foreground"]=t.customForegroundColor),a},S={title:"Components/Pagination",component:"btu-pagination",tags:["autodocs"],parameters:{docs:{subtitle:"A component for navigating through paged content",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>To navigate through large sets of data</li>
+  <li>For search results, tables, and lists</li>
+  <li>In widgets and calendar views</li>
+</ul>
+
+<h3>Variants:</h3>
+<ul>
+  <li><strong>Widget</strong> (default): Page size selector + total display + navigation</li>
+  <li><strong>Search</strong>: With page jumper dropdown</li>
+  <li><strong>Widget Small</strong>: Without first/last page buttons</li>
+  <li><strong>Calendar</strong>: Custom page-size slot + jumper slot</li>
+</ul>
+        `}},actions:{handles:b},controls:{expanded:!0}},args:{...h,"total-items":200,"boundary-buttons":!0,"hide-on-single-page":!0,"page-size-changer":!0},argTypes:{...y,"--pagination-color-background":{table:{disable:!0}},"--pagination-color-foreground":{table:{disable:!0}},customBackgroundColor:{name:"--pagination-color-background",control:{type:"color"},description:"Custom background color for buttons and select",table:{category:"CSS Properties"}},customForegroundColor:{name:"--pagination-color-foreground",control:{type:"color"},description:"Custom foreground (text/icon) color",table:{category:"CSS Properties"}}},render:t=>o`
+    <btu-pagination
+      total-items="${t["total-items"]??200}"
+      page="${t.page??1}"
+      page-size="${t["page-size"]??0}"
+      page-size-options="${t["page-size-options"]??"10, 20, 50"}"
+      ?disabled="${t.disabled}"
+      ?loading="${t.loading}"
+      .hideOnSinglePage=${t["hide-on-single-page"]??!0}
+      .pageSizeChanger=${t["page-size-changer"]??!0}
+      .boundaryButtons=${t["boundary-buttons"]??!0}
+      ?hide-total-count=${t["hide-total-count"]}
+      style=${c(u(t))}
+    ></btu-pagination>
+  `},i={args:{},parameters:{docs:{description:{story:"Default Widget variant with page size selector, total display, and full navigation controls."}}}},s={args:{"total-items":500,"page-size-options":"10, 25, 50, 100"},render:t=>o`
+    <btu-pagination
+      total-items="${t["total-items"]??500}"
+      page="${t.page??1}"
+      page-size="${t["page-size"]??0}"
+      page-size-options="${t["page-size-options"]??"10, 25, 50, 100"}"
+      ?disabled="${t.disabled}"
+      ?loading="${t.loading}"
+      .hideOnSinglePage=${t["hide-on-single-page"]??!0}
+      .pageSizeChanger=${t["page-size-changer"]??!0}
+      .boundaryButtons=${t["boundary-buttons"]??!0}
+      ?hide-total-count=${t["hide-total-count"]}
+      style=${c(u(t))}
+    >
+      <select
+        slot="jumper"
+        class="btu-pagination-select"
+        aria-label="Go to page"
+        @change=${a=>{const e=a.target,n=e.closest("btu-pagination");n&&(n.page=parseInt(e.value,10))}}
+      >
+        ${Array.from({length:50},(a,e)=>o`<option value="${e+1}">Page ${e+1}</option>`)}
+      </select>
+    </btu-pagination>
+  `,parameters:{docs:{description:{story:'Search variant with a page jumper dropdown placed via `slot="jumper"`. Allows direct navigation to a specific page.'}}}},r={args:{"total-items":100,"boundary-buttons":!1},parameters:{docs:{description:{story:"Compact widget variant without first/last page buttons. Suitable for tight spaces."}}}},l={args:{"total-items":52},render:t=>o`
+    <btu-pagination
+      total-items="${t["total-items"]??52}"
+      page="${t.page??1}"
+      page-size="1"
+      ?disabled="${t.disabled}"
+      ?loading="${t.loading}"
+      .hideOnSinglePage=${t["hide-on-single-page"]??!0}
+      .pageSizeChanger=${!1}
+      .boundaryButtons=${t["boundary-buttons"]??!0}
+      ?hide-total-count=${t["hide-total-count"]}
+      style=${c(u(t))}
+    >
+      <select slot="page-size" class="btu-pagination-select" aria-label="View type">
+        <option value="week">Week</option>
+        <option value="month">Month</option>
+      </select>
+      <button
+        slot="jumper"
+        class="btu-button btu-button-sm"
+        @click=${a=>{const e=a.target.closest("btu-pagination");e&&(e.page=1)}}
+      >
+        Today
+      </button>
+    </btu-pagination>
+  `,parameters:{docs:{description:{story:'Calendar variant using `slot="page-size"` for a week/month selector and `slot="jumper"` for a Today button.'}}}},p={args:{"total-items":200,loading:!0},parameters:{docs:{description:{story:"Loading state shows a spinner and dims the navigation controls. The `aria-busy` attribute is set on the live region."}}}},g={args:{"total-items":200,disabled:!0,page:3},parameters:{docs:{description:{story:"Disabled state prevents all interaction. All buttons and selects receive the native `disabled` attribute."}}}},d={render:()=>{const t=a=>{const e=a.target;e.loading=!0,setTimeout(()=>{e.loading=!1},1e3)};return o`
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+          <label for="total-input" class="text-sm font-medium">Total Items:</label>
+          <input
+            id="total-input"
+            type="number"
+            value="200"
+            min="0"
+            class="w-24 rounded border px-2 py-1 text-sm"
+            @input=${a=>{const e=a.target,n=e.closest(".flex.flex-col")?.querySelector("btu-pagination");n&&(n.totalItems=parseInt(e.value,10)||0)}}
+          />
+        </div>
+        <btu-pagination
+          total-items="200"
+          @btu-pagination-change=${t}
+          @btu-pagination-page-size-change=${t}
+        ></btu-pagination>
+      </div>
+    `},parameters:{docs:{description:{story:"Interactive example demonstrating dynamic `totalItems` changes at runtime. Navigation triggers a simulated 1s loading state."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default Widget variant with page size selector, total display, and full navigation controls.'
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 500,
+    'page-size-options': '10, 25, 50, 100'
+  },
+  render: args => html\`
+    <btu-pagination
+      total-items="\${args['total-items'] ?? 500}"
+      page="\${args.page ?? 1}"
+      page-size="\${args['page-size'] ?? 0}"
+      page-size-options="\${args['page-size-options'] ?? '10, 25, 50, 100'}"
+      ?disabled="\${args.disabled}"
+      ?loading="\${args.loading}"
+      .hideOnSinglePage=\${args['hide-on-single-page'] ?? true}
+      .pageSizeChanger=\${args['page-size-changer'] ?? true}
+      .boundaryButtons=\${args['boundary-buttons'] ?? true}
+      ?hide-total-count=\${args['hide-total-count']}
+      style=\${styleMap(paginationStyles(args))}
+    >
+      <select
+        slot="jumper"
+        class="btu-pagination-select"
+        aria-label="Go to page"
+        @change=\${(e: Event) => {
+    const select = e.target as HTMLSelectElement;
+    const pagination = select.closest('btu-pagination');
+    if (pagination) {
+      pagination.page = parseInt(select.value, 10);
+    }
+  }}
+      >
+        \${Array.from({
+    length: 50
+  }, (_, i) => html\`<option value="\${i + 1}">Page \${i + 1}</option>\`)}
+      </select>
+    </btu-pagination>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Search variant with a page jumper dropdown placed via \`slot="jumper"\`. Allows direct navigation to a specific page.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 100,
+    'boundary-buttons': false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact widget variant without first/last page buttons. Suitable for tight spaces.'
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 52
+  },
+  render: args => html\`
+    <btu-pagination
+      total-items="\${args['total-items'] ?? 52}"
+      page="\${args.page ?? 1}"
+      page-size="1"
+      ?disabled="\${args.disabled}"
+      ?loading="\${args.loading}"
+      .hideOnSinglePage=\${args['hide-on-single-page'] ?? true}
+      .pageSizeChanger=\${false}
+      .boundaryButtons=\${args['boundary-buttons'] ?? true}
+      ?hide-total-count=\${args['hide-total-count']}
+      style=\${styleMap(paginationStyles(args))}
+    >
+      <select slot="page-size" class="btu-pagination-select" aria-label="View type">
+        <option value="week">Week</option>
+        <option value="month">Month</option>
+      </select>
+      <button
+        slot="jumper"
+        class="btu-button btu-button-sm"
+        @click=\${(e: Event) => {
+    const pagination = (e.target as HTMLElement).closest('btu-pagination');
+    if (pagination) pagination.page = 1;
+  }}
+      >
+        Today
+      </button>
+    </btu-pagination>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Calendar variant using \`slot="page-size"\` for a week/month selector and \`slot="jumper"\` for a Today button.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 200,
+    loading: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Loading state shows a spinner and dims the navigation controls. The \`aria-busy\` attribute is set on the live region.'
+      }
+    }
+  }
+}`,...p.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 200,
+    disabled: true,
+    page: 3
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled state prevents all interaction. All buttons and selects receive the native \`disabled\` attribute.'
+      }
+    }
+  }
+}`,...g.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const simulateLoading = (e: CustomEvent) => {
+      const pagination = e.target as HTMLElement & {
+        loading: boolean;
+      };
+      pagination.loading = true;
+      setTimeout(() => {
+        pagination.loading = false;
+      }, 1000);
+    };
+    return html\`
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+          <label for="total-input" class="text-sm font-medium">Total Items:</label>
+          <input
+            id="total-input"
+            type="number"
+            value="200"
+            min="0"
+            class="w-24 rounded border px-2 py-1 text-sm"
+            @input=\${(e: Event) => {
+      const input = e.target as HTMLInputElement;
+      const pagination = (input.closest('.flex.flex-col') as HTMLElement)?.querySelector('btu-pagination') as HTMLElement & {
+        totalItems: number;
+      };
+      if (pagination) pagination.totalItems = parseInt(input.value, 10) || 0;
+    }}
+          />
+        </div>
+        <btu-pagination
+          total-items="200"
+          @btu-pagination-change=\${simulateLoading}
+          @btu-pagination-page-size-change=\${simulateLoading}
+        ></btu-pagination>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive example demonstrating dynamic \`totalItems\` changes at runtime. Navigation triggers a simulated 1s loading state.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};const z=["Default","Search","WidgetSmall","Calendar","Loading","Disabled","DynamicTotal"];export{l as Calendar,i as Default,g as Disabled,d as DynamicTotal,p as Loading,s as Search,r as WidgetSmall,z as __namedExportsOrder,S as default};

package/dist/storybook/assets/{Popover.stories-CbqpY6YR.js → Popover.stories-C9zU0sEX.js}

@@ -1,4 +1,4 @@
-import{g as c,x as r}from"./iframe-CcloOV09.js";import{o as d}from"./if-defined-COHr0XBn.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:g,argTypes:t}=c("btu-popover"),h={title:"Components/Popover",component:"btu-popover",tags:["autodocs"],parameters:{docs:{subtitle:"Rich interactive content anchored to a trigger element",description:{component:`
+import{g as a,x as r}from"./iframe-CM6gBkqA.js";import{o as c}from"./if-defined-Bv2_qPJg.js";import{o as d}from"./style-map-BJGdSb_D.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:g,argTypes:e}=a("btu-popover"),y={title:"Components/Popover",component:"btu-popover",tags:["autodocs"],parameters:{docs:{subtitle:"Rich interactive content anchored to a trigger element",description:{component:`
 \`btu-popover\` displays rich interactive content anchored to a trigger element using CSS anchor positioning and the native Popover API.
 
 <h3>When to use:</h3>
@@ -24,14 +24,14 @@ import{g as c,x as r}from"./iframe-CcloOV09.js";import{o as d}from"./if-defined-
   <li>Focus restored to trigger on close</li>
   <li>Add <code>autofocus</code> to an element inside <code>slot="content"</code> for auto-focus on open</li>
 </ul>
-        `}},actions:{handles:u},controls:{expanded:!0}},args:{...g,position:"bottom",trigger:"click",delay:300,open:!1},argTypes:{...t,position:{...t.position,control:{type:"select"},options:["top","bottom","left","right"]},trigger:{...t.trigger,control:{type:"select"},options:["click","hover","focus"]},delay:{...t.delay,control:{type:"number"},description:"Show delay in ms (hover trigger only)"},offset:{...t.offset,control:{type:"select"},options:["sm","md","lg","xl"],description:"Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px)"},open:{...t.open,control:{type:"boolean"},description:"Programmatic open/close (reflected)"},customBg:{name:"--popover-color-background",description:"Background color",control:{type:"color"},table:{category:"CSS Custom Properties",defaultValue:{summary:"white"}}},customTitleColor:{name:"--popover-color-title",description:"Title text color",control:{type:"color"},table:{category:"CSS Custom Properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customContentColor:{name:"--popover-color-content",description:"Content text color",control:{type:"color"},table:{category:"CSS Custom Properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customRadius:{name:"--popover-border-radius",description:"Border radius",control:{type:"select"},options:["0px","0.125rem","0.25rem","0.375rem","0.5rem","0.75rem","1rem","1.5rem","9999px"],labels:{"0px":"none (0px)","0.125rem":"sm (0.125rem)","0.25rem":"DEFAULT (0.25rem)","0.375rem":"md (0.375rem)","0.5rem":"lg (0.5rem)","0.75rem":"xl (0.75rem)","1rem":"2xl (1rem)","1.5rem":"3xl (1.5rem)","9999px":"full (9999px)"},table:{category:"CSS Custom Properties",defaultValue:{summary:"0.5rem (lg)"}}}},render:o=>{const e=[];o.customBg&&e.push(`--popover-color-background: ${o.customBg}`),o.customTitleColor&&e.push(`--popover-color-title: ${o.customTitleColor}`),o.customContentColor&&e.push(`--popover-color-content: ${o.customContentColor}`),o.customRadius&&e.push(`--popover-border-radius: ${o.customRadius}`);const a=e.length>0?e.join("; "):"";return r`
+        `}},actions:{handles:u},controls:{expanded:!0}},args:{...g,position:"bottom",trigger:"click",delay:300,open:!1},argTypes:{...e,position:{...e.position,control:{type:"select"},options:["top","bottom","left","right"]},trigger:{...e.trigger,control:{type:"select"},options:["click","hover","focus"]},delay:{...e.delay,control:{type:"number"},description:"Show delay in ms (hover trigger only)"},offset:{...e.offset,control:{type:"select"},options:["sm","md","lg","xl"],description:"Gap between trigger and popover (sm=4px, md=8px, lg=12px, xl=16px)"},open:{...e.open,control:{type:"boolean"},description:"Programmatic open/close (reflected)"},customBg:{name:"--popover-color-background",description:"Background color",control:{type:"color"},table:{category:"CSS Properties",defaultValue:{summary:"white"}}},customTitleColor:{name:"--popover-color-title",description:"Title text color",control:{type:"color"},table:{category:"CSS Properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customContentColor:{name:"--popover-color-content",description:"Content text color",control:{type:"color"},table:{category:"CSS Properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customRadius:{name:"--popover-border-radius",description:"Border radius",control:{type:"select"},options:["0px","0.125rem","0.25rem","0.375rem","0.5rem","0.75rem","1rem","1.5rem","9999px"],labels:{"0px":"none (0px)","0.125rem":"sm (0.125rem)","0.25rem":"DEFAULT (0.25rem)","0.375rem":"md (0.375rem)","0.5rem":"lg (0.5rem)","0.75rem":"xl (0.75rem)","1rem":"2xl (1rem)","1.5rem":"3xl (1.5rem)","9999px":"full (9999px)"},table:{category:"CSS Properties",defaultValue:{summary:"0.5rem (lg)"}}}},render:o=>{const t={};return o.customBg&&(t["--popover-color-background"]=o.customBg),o.customTitleColor&&(t["--popover-color-title"]=o.customTitleColor),o.customContentColor&&(t["--popover-color-content"]=o.customContentColor),o.customRadius&&(t["--popover-border-radius"]=o.customRadius),r`
       <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
-        <div style="${a}">
+        <div style=${d(t)}>
           <btu-popover
             position="${o.position}"
             trigger="${o.trigger}"
             delay="${o.delay}"
-            offset="${d(o.offset)}"
+            offset="${c(o.offset)}"
             ?no-arrow="${o.noArrow}"
             ?open="${o.open}"
           >
@@ -428,4 +428,4 @@ import{g as c,x as r}from"./iframe-CcloOV09.js";import{o as d}from"./if-defined-
       }
     }
   }
-}`,...l.parameters?.docs?.source}}};const y=["Default","Positions","RichContent","AdvancedUsage"];export{l as AdvancedUsage,n as Default,i as Positions,s as RichContent,y as __namedExportsOrder,h as default};
+}`,...l.parameters?.docs?.source}}};const f=["Default","Positions","RichContent","AdvancedUsage"];export{l as AdvancedUsage,n as Default,i as Positions,s as RichContent,f as __namedExportsOrder,y as default};

package/dist/storybook/assets/{ReadyMixin-BHiHoIbr.js → ReadyMixin-qf8SAjMu.js}

@@ -1 +1 @@
-import"./iframe-CcloOV09.js";const i=t=>{class n extends t{connectedCallback(){super.connectedCallback(),Promise.resolve().then(()=>this.emit("btu-element-connected",{}),e=>this.emit("btu-element-error",{error:e}))}disconnectedCallback(){super.disconnectedCallback(),this.emit("btu-element-disconnected")}emit(e,c){return this.dispatchEvent(new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:c}))}}return n},l=t=>{class n extends t{connectedCallback(){const e=()=>{super.connectedCallback()};document.readyState!=="loading"?e():document.addEventListener("DOMContentLoaded",()=>e())}}return n};export{i as E,l as R};
+import"./iframe-CM6gBkqA.js";const i=t=>{class n extends t{connectedCallback(){super.connectedCallback(),Promise.resolve().then(()=>this.emit("btu-element-connected",{}),e=>this.emit("btu-element-error",{error:e}))}disconnectedCallback(){super.disconnectedCallback(),this.emit("btu-element-disconnected")}emit(e,c){return this.dispatchEvent(new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:c}))}}return n},l=t=>{class n extends t{connectedCallback(){const e=()=>{super.connectedCallback()};document.readyState!=="loading"?e():document.addEventListener("DOMContentLoaded",()=>e())}}return n};export{i as E,l as R};

package/dist/storybook/assets/{Rtc.stories-CAjDv_Ub.js → Rtc.stories-k9tKHNhD.js}

@@ -1,4 +1,4 @@
-import{x as o}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz.js";const r={title:"Utilities/RTC",tags:["autodocs"],parameters:{docs:{subtitle:"The `rtc` module provides real-time communication between browser tabs and the Brightspot CMS server. Uses BroadcastChannel for cross-tab coordination with leader election, and Server-Sent Events for server communication."},controls:{expanded:!0}}},e={render:()=>o`
+import{x as o}from"./iframe-CM6gBkqA.js";import"./preload-helper-PPVm8Dsz.js";const r={title:"Utilities/RTC",tags:["autodocs"],parameters:{docs:{subtitle:"The `rtc` module provides real-time communication between browser tabs and the Brightspot CMS server. Uses BroadcastChannel for cross-tab coordination with leader election, and Server-Sent Events for server communication."},controls:{expanded:!0}}},e={render:()=>o`
     <div class="space-y-6 text-sm">
       <div>
         <h3 class="mb-2 font-bold">Overview</h3>

package/dist/storybook/assets/{ScrollShadow.stories-BSV4U-tq.js → ScrollShadow.stories-Bp42zyLH.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-CcloOV09.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`
+import{x as a}from"./iframe-CM6gBkqA.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:   ;

package/dist/storybook/assets/{Throttle.stories-kaxXQ8RZ.js → Throttle.stories-B5YU-Nms.js}

@@ -1,4 +1,4 @@
-import{x as u}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz.js";function v(e,t){if(e<=0)return t;let n,o=0;return function(){if(n)return;const r=Date.now(),s=e-r+o;s<=0?(o=r,t.apply(this,[...arguments])):n=setTimeout(()=>{o=r,n=void 0,t.apply(this,[...arguments])},s)}}const x={title:"Utilities/Throttle",tags:["autodocs"],parameters:{docs:{subtitle:"The `throttle` utility function limits how often a function can execute, ensuring it runs at most once per specified interval. Useful for high-frequency events like scroll, resize, or mousemove."},controls:{expanded:!0}},argTypes:{interval:{control:{type:"number",min:0,max:2e3,step:50},description:"Throttle interval in milliseconds"}},args:{interval:200}},d={render:e=>{const t=`throttle-${Math.random().toString(36).substring(2,9)}`;let n=0,o=0;const r=()=>{const h=document.getElementById(`${t}-normal-count`),m=document.getElementById(`${t}-throttled-count`);h&&(h.textContent=String(n)),m&&(m.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),a=()=>{n++,r()},l=()=>{a(),s()};return u`
+import{x as u}from"./iframe-CM6gBkqA.js";import"./preload-helper-PPVm8Dsz.js";function v(e,t){if(e<=0)return t;let n,o=0;return function(){if(n)return;const r=Date.now(),s=e-r+o;s<=0?(o=r,t.apply(this,[...arguments])):n=setTimeout(()=>{o=r,n=void 0,t.apply(this,[...arguments])},s)}}const x={title:"Utilities/Throttle",tags:["autodocs"],parameters:{docs:{subtitle:"The `throttle` utility function limits how often a function can execute, ensuring it runs at most once per specified interval. Useful for high-frequency events like scroll, resize, or mousemove."},controls:{expanded:!0}},argTypes:{interval:{control:{type:"number",min:0,max:2e3,step:50},description:"Throttle interval in milliseconds"}},args:{interval:200}},d={render:e=>{const t=`throttle-${Math.random().toString(36).substring(2,9)}`;let n=0,o=0;const r=()=>{const h=document.getElementById(`${t}-normal-count`),m=document.getElementById(`${t}-throttled-count`);h&&(h.textContent=String(n)),m&&(m.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),a=()=>{n++,r()},l=()=>{a(),s()};return u`
       <div class="space-y-4">
         <div class="text-base">
           <p class="mb-2">