@brightspot/ui 1.6.0 → 1.8.0

package/dist/storybook/assets/{LinearProgress.stories-qzqmUUwY.js → LinearProgress.stories-INijWBr_.js}

@@ -1,11 +1,11 @@
-import{g as I,E as h,x as T}from"./iframe-Dz6CxatW.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-CsKt54V3.js";import{o as A}from"./style-map-kcS06w9f.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-Dz6CxatW.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/LucideDynamicLoader-jmdq8YDM.js

@@ -0,0 +1 @@
+const o="0.508.0",s={version:o},c=s.version;export{c as L};

package/dist/storybook/assets/{Pagination.stories-B6Q-7taJ.js → Pagination.stories-CrExaWpC.js}

@@ -1,4 +1,4 @@
-import{g as m,x as o}from"./iframe-Dz6CxatW.js";import{o as c}from"./style-map-BgW9piaW.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:`
+import{g as m,x as o}from"./iframe-CsKt54V3.js";import{o as c}from"./style-map-kcS06w9f.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>

package/dist/storybook/assets/{Popover.stories-CGkU0SGv.js → Popover.stories-Bh6IUPG_.js}

@@ -1,4 +1,4 @@
-import{g as c,x as r}from"./iframe-Dz6CxatW.js";import{o as d}from"./if-defined-CngSGyRu.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-CsKt54V3.js";import{o as c}from"./if-defined-D1UQmdjo.js";import{o as d}from"./style-map-kcS06w9f.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-Dz6CxatW.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-Dz6CxatW.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-3YCzoG6W.js → ReadyMixin-C1lZU7vt.js}

@@ -1 +1 @@
-import"./iframe-Dz6CxatW.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-CsKt54V3.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-Y1MYTWAt.js → Rtc.stories-BHqFwgR7.js}

@@ -1,4 +1,4 @@
-import{x as o}from"./iframe-Dz6CxatW.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-CsKt54V3.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-B9kSpLT1.js → ScrollShadow.stories-DnIj5cZF.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-Dz6CxatW.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-CsKt54V3.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-BgvLDrS3.js → Throttle.stories-Dilsv90H.js}

@@ -1,4 +1,4 @@
-import{x as u}from"./iframe-Dz6CxatW.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-CsKt54V3.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">

package/dist/storybook/assets/Tooltip.stories-Dnb76OXa.js

@@ -0,0 +1,143 @@
+import{f as v,u as x,x as c,i as w}from"./iframe-CsKt54V3.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-D1UQmdjo.js";import{o as k}from"./style-map-kcS06w9f.js";import{E as C,R as L}from"./ReadyMixin-C1lZU7vt.js";import"./preload-helper-PPVm8Dsz.js";const S={attribute:!0,type:String,converter:x,reflect:!1,hasChanged:v},D=(o=S,i,l)=>{const{kind:t,metadata:e}=l;let s=globalThis.litPropertyMetadata.get(e);if(s===void 0&&globalThis.litPropertyMetadata.set(e,s=new Map),t==="setter"&&((o=Object.create(o)).wrapped=!0),s.set(l.name,o),t==="accessor"){const{name:r}=l;return{set(n){const g=i.get.call(this);i.set.call(this,n),this.requestUpdate(r,g,o)},init(n){return n!==void 0&&this.C(r,void 0,o,n),n}}}if(t==="setter"){const{name:r}=l;return function(n){const g=this[r];i.call(this,n),this.requestUpdate(r,g,o)}}throw Error("Unsupported decorator location: "+t)};function p(o){return(i,l)=>typeof l=="object"?D(o,i,l):((t,e,s)=>{const r=e.hasOwnProperty(s);return e.constructor.createProperty(s,t),r?Object.getOwnPropertyDescriptor(e,s):void 0})(o,i,l)}var A=Object.defineProperty,a=(o,i,l,t)=>{for(var e=void 0,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=r(i,l,e)||e);return e&&A(i,l,e),e};const M={top:"btu-tooltip-top",bottom:"btu-tooltip-bottom",left:"btu-tooltip-left",right:"btu-tooltip-right"},_={sm:"btu-tooltip-offset-sm",md:"btu-tooltip-offset-md",lg:"btu-tooltip-offset-lg",xl:"btu-tooltip-offset-xl"},O=o=>{class i extends o{constructor(){super(...arguments),this.tooltip="",this.tooltipPosition="top",this.tooltipDelay=300,this.tooltipOffset=null,this.tooltipNoArrow=!1,this.tooltipTrigger="hover focus",this._tooltipEl=null,this._tooltipId=`btu-tooltip-${crypto.randomUUID()}`,this._anchorName=`--btu-trigger-${crypto.randomUUID()}`,this._showTimer=null,this._isVisible=!1,this._activeTriggers=new Set,this._onMouseEnter=this._handleMouseEnter.bind(this),this._onMouseLeave=this._handleMouseLeave.bind(this),this._onFocusIn=this._handleFocusIn.bind(this),this._onFocusOut=this._handleFocusOut.bind(this),this._onClick=this._handleClick.bind(this),this._onNativeToggle=this._handleNativeToggle.bind(this),this._onKeyDown=this._handleKeyDown.bind(this),this._onDocumentClick=null}connectedCallback(){super.connectedCallback(),this._bindTriggerListeners()}disconnectedCallback(){if(this._clearShowTimer(),this._removeDocumentClickListener(),this._unbindTriggerListeners(),this._tooltipEl){try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip during disconnect:",t)}this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null}this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),this._isVisible=!1,super.disconnectedCallback()}updated(t){super.updated(t),t.has("tooltipTrigger")&&(this._unbindTriggerListeners(),this._bindTriggerListeners(),this._tooltipEl&&(this._isVisible&&this._hide(),this._tooltipEl.setAttribute("popover",this._getPopoverMode()))),(t.has("tooltip")||t.has("tooltipPosition")||t.has("tooltipDelay")||t.has("tooltipOffset")||t.has("tooltipNoArrow"))&&this._syncTooltipElement()}_getPopoverMode(){return"manual"}_syncTooltipElement(){if(!this.tooltip){this._tooltipEl&&(this._hide(),this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null,this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),document.removeEventListener("keydown",this._onKeyDown));return}this.style.setProperty("anchor-name",this._anchorName),this._tooltipEl||(this._tooltipEl=this._createTooltipElement(),this.appendChild(this._tooltipEl),this._appendAriaDescribedBy(),document.addEventListener("keydown",this._onKeyDown)),this._tooltipEl.textContent=this.tooltip,this._tooltipEl.className=this._buildTooltipClasses()}_createTooltipElement(){const t=document.createElement("div");return t.id=this._tooltipId,t.className=this._buildTooltipClasses(),t.setAttribute("role","tooltip"),t.setAttribute("data-tooltip-internal",""),t.setAttribute("popover",this._getPopoverMode()),t.style.setProperty("position-anchor",this._anchorName),t.textContent=this.tooltip,t.addEventListener("toggle",this._onNativeToggle),t}_buildTooltipClasses(){const t=["btu-tooltip",M[this.tooltipPosition]];return this.tooltipOffset&&_[this.tooltipOffset]&&t.push(_[this.tooltipOffset]),this.tooltipNoArrow&&t.push("btu-tooltip-no-arrow"),t.join(" ")}_hasTrigger(t){return this._activeTriggers.has(t)}_bindTriggerListeners(){const t=new Set(["hover","focus","click"]);this._activeTriggers=new Set(this.tooltipTrigger.trim().split(/\s+/));for(const e of this._activeTriggers)t.has(e)||console.warn(`[btu-tooltip] Unrecognized tooltip-trigger value: "${e}". Valid values: hover, focus, click.`);this._hasTrigger("hover")&&(this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave)),this._hasTrigger("focus")&&(this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut)),this._hasTrigger("click")&&this.addEventListener("click",this._onClick)}_unbindTriggerListeners(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),this.removeEventListener("click",this._onClick),document.removeEventListener("keydown",this._onKeyDown)}_show(){if(!(this._isVisible||!this._tooltipEl)){try{this._tooltipEl.showPopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to show tooltip:",t)}this._hasTrigger("click")&&setTimeout(()=>{this._removeDocumentClickListener(),this._onDocumentClick=t=>{const e=t.composedPath();!e.includes(this)&&(!this._tooltipEl||!e.includes(this._tooltipEl))&&this._hide()},document.addEventListener("click",this._onDocumentClick)},0)}}_hide(){if(this._clearShowTimer(),this._removeDocumentClickListener(),!(!this._isVisible||!this._tooltipEl))try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip:",t)}}_removeDocumentClickListener(){this._onDocumentClick&&(document.removeEventListener("click",this._onDocumentClick),this._onDocumentClick=null)}_handleNativeToggle(t){const{newState:e}=t;this._isVisible=e==="open",this.dispatchEvent(new CustomEvent(this._isVisible?"btu-tooltip-show":"btu-tooltip-hide",{bubbles:!0,composed:!0}))}_handleKeyDown(t){t.key==="Escape"&&(this._clearShowTimer(),this._hide())}_clearShowTimer(){this._showTimer!==null&&(clearTimeout(this._showTimer),this._showTimer=null)}_handleMouseEnter(){this._clearShowTimer(),this._showTimer=setTimeout(()=>{this._show()},this.tooltipDelay)}_handleMouseLeave(){this._clearShowTimer(),this._hide()}_handleFocusIn(){this._clearShowTimer(),this._show()}_handleFocusOut(){this._clearShowTimer(),this._hide()}_handleClick(){this._clearShowTimer(),this._isVisible?this._hide():this._show()}_appendAriaDescribedBy(){const t=this.getAttribute("aria-describedby");t?t.includes(this._tooltipId)||this.setAttribute("aria-describedby",`${t} ${this._tooltipId}`):this.setAttribute("aria-describedby",this._tooltipId)}_removeAriaDescribedBy(){const t=this.getAttribute("aria-describedby");if(!t)return;const e=t.split(/\s+/).filter(s=>s!==this._tooltipId).join(" ").trim();e?this.setAttribute("aria-describedby",e):this.removeAttribute("aria-describedby")}}return a([p({attribute:"tooltip"})],i.prototype,"tooltip"),a([p({attribute:"tooltip-position"})],i.prototype,"tooltipPosition"),a([p({attribute:"tooltip-delay",type:Number})],i.prototype,"tooltipDelay"),a([p({attribute:"tooltip-offset"})],i.prototype,"tooltipOffset"),a([p({attribute:"tooltip-no-arrow",type:Boolean})],i.prototype,"tooltipNoArrow"),a([p({attribute:"tooltip-trigger"})],i.prototype,"tooltipTrigger"),i};var P=Object.defineProperty,$=Object.getOwnPropertyDescriptor,y=(o,i,l,t)=>{for(var e=t>1?void 0:t?$(i,l):i,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=(t?r(i,l,e):r(e))||e);return t&&e&&P(i,l,e),e};let b=class extends O(C(L(w))){constructor(){super(...arguments),this.label="Hover me",this.initialClasses=[]}connectedCallback(){super.connectedCallback(),this.className&&(this.initialClasses=this.className.split(" ").filter(o=>o.trim()))}createRenderRoot(){return this}willUpdate(){const o=[...this.initialClasses,"tooltip-demo"];this.className=o.filter(Boolean).join(" ")}render(){return c`${this.label}`}};y([p({type:String})],b.prototype,"label",2);b=y([E("tooltip-demo")],b);const f=`
+  .tooltip-demo {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    background-color: oklch(var(--btu-theme-gray-100));
+    color: oklch(var(--btu-theme-gray-700));
+    font-weight: 500;
+    font-size: 0.875rem;
+    cursor: default;
+    user-select: none;
+  }
+`,V={title:"Mixins/Tooltip",tags:["autodocs"],parameters:{docs:{subtitle:"Declarative tooltip support for any LitElement component",description:{component:`
+\`TooltipMixin\` adds declarative tooltip support to any LitElement component using CSS anchor positioning and the Popover API.
+
+<h3>Opt-in Pattern</h3>
+
+\`\`\`typescript
+class MyComponent extends TooltipMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
+  // Component now supports tooltip attributes
+}
+\`\`\`
+
+\`\`\`html
+<my-component tooltip="Hello!" tooltip-position="bottom"></my-component>
+\`\`\`
+
+<h3>Accessibility</h3>
+<ul>
+  <li><code>role="tooltip"</code> on tooltip element</li>
+  <li><code>aria-describedby</code> on host links to tooltip (appends to existing value)</li>
+  <li>Shows on <code>focusin</code>, hides on <code>focusout</code> and <code>Escape</code></li>
+  <li><code>prefers-reduced-motion: reduce</code> disables slide animation</li>
+</ul>
+        `}},controls:{expanded:!0}},args:{tooltip:"This is a tooltip","tooltip-position":"top","tooltip-delay":300,"tooltip-no-arrow":!1,"tooltip-trigger":"hover focus",label:"Hover me"},argTypes:{tooltip:{control:{type:"text"},description:"Tooltip text. No tooltip rendered when empty.",table:{category:"Attributes"}},"tooltip-position":{control:{type:"select"},options:["top","bottom","left","right"],description:"Preferred placement (auto-flips if viewport constrained)",table:{category:"Attributes"}},"tooltip-delay":{control:{type:"number"},description:"Delay before showing tooltip on hover (ms)",table:{category:"Attributes"}},"tooltip-offset":{control:{type:"select"},options:["sm","md","lg","xl"],description:"Gap between trigger and tooltip (sm=4px, md=8px, lg=12px, xl=16px)",table:{category:"Attributes"}},"tooltip-no-arrow":{control:{type:"boolean"},description:"Hide the arrow pseudo-element",table:{category:"Attributes"}},"tooltip-trigger":{control:{type:"select"},options:["hover focus","hover","focus","click","hover click"],description:"How the tooltip is activated (combinable triggers)",table:{category:"Attributes"}},label:{control:{type:"text"},description:"Demo button label text",table:{category:"Demo"}},customBg:{name:"--tooltip-color-background",control:{type:"color"},description:"Background color",table:{category:"CSS Properties",defaultValue:{summary:"white"}}},customTextColor:{name:"--tooltip-color-text",control:{type:"color"},description:"Text color",table:{category:"CSS Properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customRadius:{name:"--tooltip-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)"},description:"Border radius",table:{category:"CSS Properties",defaultValue:{summary:"0.5rem (lg)"}}}},render:o=>{const i={};return o.customBg&&(i["--tooltip-color-background"]=o.customBg),o.customTextColor&&(i["--tooltip-color-text"]=o.customTextColor),o.customRadius&&(i["--tooltip-border-radius"]=o.customRadius),c`
+      <style>
+        ${f}
+      </style>
+      <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
+        <div style=${k(i)}>
+          <tooltip-demo
+            tooltip="${o.tooltip}"
+            tooltip-position="${o["tooltip-position"]}"
+            tooltip-delay="${o["tooltip-delay"]}"
+            tooltip-offset="${T(o["tooltip-offset"])}"
+            ?tooltip-no-arrow="${o["tooltip-no-arrow"]}"
+            tooltip-trigger="${o["tooltip-trigger"]}"
+            label="${o.label}"
+          ></tooltip-demo>
+        </div>
+      </div>
+    `}},d={args:{}},h={render:()=>c`
+    <style>
+      ${f}
+    </style>
+    <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
+      <tooltip-demo tooltip="Top tooltip" tooltip-position="top" label="Top"></tooltip-demo>
+      <tooltip-demo tooltip="Bottom tooltip" tooltip-position="bottom" label="Bottom"></tooltip-demo>
+      <tooltip-demo tooltip="Left tooltip" tooltip-position="left" label="Left"></tooltip-demo>
+      <tooltip-demo tooltip="Right tooltip" tooltip-position="right" label="Right"></tooltip-demo>
+    </div>
+  `,parameters:{docs:{description:{story:"Tooltips support four positions: `top`, `bottom`, `left`, and `right`. Each position auto-flips to the opposite side if constrained by the viewport."},story:{inline:!1,iframeHeight:300}}}},m={render:()=>c`
+    <style>
+      ${f}
+    </style>
+    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
+      <tooltip-demo tooltip="Small offset (4px)" tooltip-offset="sm" label="sm"></tooltip-demo>
+      <tooltip-demo tooltip="Medium offset (8px)" tooltip-offset="md" label="md"></tooltip-demo>
+      <tooltip-demo tooltip="Large offset (12px)" tooltip-offset="lg" label="lg"></tooltip-demo>
+      <tooltip-demo tooltip="Extra large offset (16px)" tooltip-offset="xl" label="xl"></tooltip-demo>
+    </div>
+  `,parameters:{docs:{description:{story:"The `tooltip-offset` attribute controls the gap between trigger and tooltip using named sizes: `sm` (4px), `md` (8px), `lg` (12px), `xl` (16px)."}}}},u={render:()=>c`
+    <style>
+      ${f}
+    </style>
+    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
+      <tooltip-demo tooltip="Click-triggered tooltip" tooltip-trigger="click" label="Click me"></tooltip-demo>
+      <tooltip-demo tooltip="Hover or click" tooltip-trigger="hover click" label="Hover or click"></tooltip-demo>
+    </div>
+  `,parameters:{docs:{description:{story:"The `tooltip-trigger` attribute controls how the tooltip is activated. `click` toggles on click and dismisses on Escape. Triggers can be combined with spaces."}}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...d.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <style>
+      \${demoStyle}
+    </style>
+    <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
+      <tooltip-demo tooltip="Top tooltip" tooltip-position="top" label="Top"></tooltip-demo>
+      <tooltip-demo tooltip="Bottom tooltip" tooltip-position="bottom" label="Bottom"></tooltip-demo>
+      <tooltip-demo tooltip="Left tooltip" tooltip-position="left" label="Left"></tooltip-demo>
+      <tooltip-demo tooltip="Right tooltip" tooltip-position="right" label="Right"></tooltip-demo>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tooltips support four positions: \`top\`, \`bottom\`, \`left\`, and \`right\`. Each position auto-flips to the opposite side if constrained by the viewport.'
+      },
+      story: {
+        inline: false,
+        iframeHeight: 300
+      }
+    }
+  }
+}`,...h.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <style>
+      \${demoStyle}
+    </style>
+    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
+      <tooltip-demo tooltip="Small offset (4px)" tooltip-offset="sm" label="sm"></tooltip-demo>
+      <tooltip-demo tooltip="Medium offset (8px)" tooltip-offset="md" label="md"></tooltip-demo>
+      <tooltip-demo tooltip="Large offset (12px)" tooltip-offset="lg" label="lg"></tooltip-demo>
+      <tooltip-demo tooltip="Extra large offset (16px)" tooltip-offset="xl" label="xl"></tooltip-demo>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The \`tooltip-offset\` attribute controls the gap between trigger and tooltip using named sizes: \`sm\` (4px), \`md\` (8px), \`lg\` (12px), \`xl\` (16px).'
+      }
+    }
+  }
+}`,...m.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <style>
+      \${demoStyle}
+    </style>
+    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
+      <tooltip-demo tooltip="Click-triggered tooltip" tooltip-trigger="click" label="Click me"></tooltip-demo>
+      <tooltip-demo tooltip="Hover or click" tooltip-trigger="hover click" label="Hover or click"></tooltip-demo>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The \`tooltip-trigger\` attribute controls how the tooltip is activated. \`click\` toggles on click and dismisses on Escape. Triggers can be combined with spaces.'
+      }
+    }
+  }
+}`,...u.parameters?.docs?.source}}};const H=["Default","Positions","Offset","ClickTrigger"];export{u as ClickTrigger,d as Default,m as Offset,h as Positions,H as __namedExportsOrder,V as default};

package/dist/storybook/assets/{Widget.stories--JpqVyJe.js → Widget.stories-Cl-3dv15.js}

@@ -1,4 +1,4 @@
-import{g as h,x as l}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz.js";const{events:m,args:y,argTypes:a}=h("btu-widget"),v={title:"Components/Widget",component:"btu-widget",tags:["autodocs"],parameters:{docs:{subtitle:"btu-widget",description:{component:`
+import{g as h,x as l}from"./iframe-CsKt54V3.js";import{o as m}from"./style-map-kcS06w9f.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:w,argTypes:a}=h("btu-widget"),$={title:"Components/Widget",component:"btu-widget",tags:["autodocs"],parameters:{docs:{subtitle:"btu-widget",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>To display content in a structured widget layout</li>
@@ -12,13 +12,13 @@ import{g as h,x as l}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
   <li>Content Edit History Panel</li>
   <li>Global search filters</li>
 </ul>
-        `}},actions:{handles:m},controls:{expanded:!0}},args:{...y,heading:"Widget Title",collapsible:!0},argTypes:{...a,"--header-background":{table:{disable:!0}},"--widget-background":{table:{disable:!0}},"--widget-border":{table:{disable:!0}},isFullscreen:{table:{disable:!0}},heading:{...a.heading,control:{type:"text"},description:"Heading text displayed in the header."},collapsible:{...a.collapsible,control:{type:"boolean"},description:"Whether the widget can be collapsed/expanded. Adds chevron toggle button."},collapsed:{...a.collapsed,control:{type:"boolean"},description:"Whether the widget is currently collapsed (body and footer hidden)."},fullscreenable:{...a.fullscreenable,control:{type:"boolean"},description:"Whether the widget can enter fullscreen mode. Adds fullscreen toggle button."},customWidgetBackground:{name:"--widget-background",control:{type:"color"},description:"Widget background color (default: #ffffff)",table:{category:"CSS Properties"}},customWidgetBorder:{name:"--widget-border",control:{type:"text"},description:'Widget border (e.g., "2px solid #ccc", default: "1px solid #e0e0e0")',table:{category:"CSS Properties"}},customHeaderBackground:{name:"--header-background",control:{type:"color"},description:"Header background color (default: transparent)",table:{category:"CSS Properties"}}},render:e=>{const t=[];e.customWidgetBackground&&t.push(`--widget-background: ${e.customWidgetBackground}`),e.customWidgetBorder&&t.push(`--widget-border: ${e.customWidgetBorder}`),e.customHeaderBackground&&t.push(`--header-background: ${e.customHeaderBackground}`);const r=t.length>0?t.join("; "):"";return l`
+        `}},actions:{handles:y},controls:{expanded:!0}},args:{...w,heading:"Widget Title",collapsible:!0},argTypes:{...a,"--header-background":{table:{disable:!0}},"--widget-background":{table:{disable:!0}},"--widget-border":{table:{disable:!0}},isFullscreen:{table:{disable:!0}},heading:{...a.heading,control:{type:"text"},description:"Heading text displayed in the header."},collapsible:{...a.collapsible,control:{type:"boolean"},description:"Whether the widget can be collapsed/expanded. Adds chevron toggle button."},collapsed:{...a.collapsed,control:{type:"boolean"},description:"Whether the widget is currently collapsed (body and footer hidden)."},fullscreenable:{...a.fullscreenable,control:{type:"boolean"},description:"Whether the widget can enter fullscreen mode. Adds fullscreen toggle button."},customWidgetBackground:{name:"--widget-background",control:{type:"color"},description:"Widget background color (default: #ffffff)",table:{category:"CSS Properties"}},customWidgetBorder:{name:"--widget-border",control:{type:"text"},description:'Widget border (e.g., "2px solid #ccc", default: "1px solid #e0e0e0")',table:{category:"CSS Properties"}},customHeaderBackground:{name:"--header-background",control:{type:"color"},description:"Header background color (default: transparent)",table:{category:"CSS Properties"}}},render:e=>{const t={};return e.customWidgetBackground&&(t["--widget-background"]=e.customWidgetBackground),e.customWidgetBorder&&(t["--widget-border"]=e.customWidgetBorder),e.customHeaderBackground&&(t["--header-background"]=e.customHeaderBackground),l`
       <btu-widget
         .heading=${e.heading??""}
         ?collapsible=${e.collapsible}
         ?collapsed=${e.collapsed}
         ?fullscreenable=${e.fullscreenable}
-        style=${r}
+        style=${m(t)}
       >
         <button
           class="btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs"
@@ -28,7 +28,7 @@ import{g as h,x as l}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
         </button>
         <div>This is the main body content of the widget.</div>
       </btu-widget>
-    `}},d={args:{fullscreenable:!0}},c={render:e=>l`
+    `}},i={args:{fullscreenable:!0}},d={render:e=>l`
     <btu-widget
       .heading=${e.heading??"Widget with Controls"}
       ?collapsible=${e.collapsible??!0}
@@ -41,7 +41,7 @@ import{g as h,x as l}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
       </div>
       <div>Body content with heading and an action bar in the footer.</div>
     </btu-widget>
-  `,parameters:{docs:{description:{story:"Widget demonstrating how easy it is to add an action bar component to the footer of a widget."}}}},u={render:e=>l`
+  `,parameters:{docs:{description:{story:"Widget demonstrating how easy it is to add an action bar component to the footer of a widget."}}}},c={render:e=>l`
     <btu-widget
       .heading=${e.heading??"Fully Themed Widget"}
       ?collapsible=${e.collapsible}
@@ -57,7 +57,7 @@ import{g as h,x as l}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
         <small>Footer content (hidden when collapsed)</small>
       </div>
     </btu-widget>
-  `,parameters:{docs:{description:{story:"Widget with complete theming using all available CSS variables. Demonstrates full control over widget and header appearance."}}}},b={args:{collapsible:!0,collapsed:!0},render:e=>l`
+  `,parameters:{docs:{description:{story:"Widget with complete theming using all available CSS variables. Demonstrates full control over widget and header appearance."}}}},u={args:{collapsible:!0,collapsed:!0},render:e=>l`
     <btu-widget
       .heading=${e.heading??"Initially Collapsed"}
       ?collapsible=${e.collapsible??!0}
@@ -69,7 +69,7 @@ import{g as h,x as l}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
         <p>Click the chevron to expand and see this content.</p>
       </div>
     </btu-widget>
-  `,parameters:{docs:{description:{story:"Widget that starts in a collapsed state."}}}},p={render:e=>{const t=["pencil","gear","trash","star","heart","bell"];let r=0;const g=n=>{const o=document.createElement("btu-icon");o.setAttribute("symbol",t[r%t.length]),o.setAttribute("slot","controls"),r++,n.appendChild(o);const s=document.createElement("p");s.textContent="This paragraph was added dynamically and automatically redistributed to the body!",s.style.color="#16a34a",s.style.fontWeight="600",n.appendChild(s);const i=document.createElement("button");i.className="btu-button btu-button-purple",i.textContent="Button",i.setAttribute("slot","footer"),n.appendChild(i)};return l`
+  `,parameters:{docs:{description:{story:"Widget that starts in a collapsed state."}}}},b={render:e=>{const t=["pencil","gear","trash","star","heart","bell"];let p=0;const g=n=>{const o=document.createElement("btu-icon");o.setAttribute("symbol",t[p%t.length]),o.setAttribute("slot","controls"),p++,n.appendChild(o);const r=document.createElement("p");r.textContent="This paragraph was added dynamically and automatically redistributed to the body!",r.style.color="#16a34a",r.style.fontWeight="600",n.appendChild(r);const s=document.createElement("button");s.className="btu-button btu-button-purple",s.textContent="Button",s.setAttribute("slot","footer"),n.appendChild(s)};return l`
       <div style="display: flex; flex-direction: column; gap: 1rem;">
         <button
           class="btu-button btu-button-primary"
@@ -95,11 +95,11 @@ import{g as h,x as l}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
           </div>
         </btu-widget>
       </div>
-    `},parameters:{docs:{description:{story:"Demonstrates the Manager Pattern's MutationObserver: Content added dynamically is automatically redistributed to the correct containers based on slot attributes."}}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+    `},parameters:{docs:{description:{story:"Demonstrates the Manager Pattern's MutationObserver: Content added dynamically is automatically redistributed to the correct containers based on slot attributes."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
   args: {
     fullscreenable: true
   }
-}`,...d.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+}`,...i.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
   render: args => html\`
     <btu-widget
       .heading=\${args.heading ?? 'Widget with Controls'}
@@ -121,7 +121,7 @@ import{g as h,x as l}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...c.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+}`,...d.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
   render: args => html\`
     <btu-widget
       .heading=\${args.heading ?? 'Fully Themed Widget'}
@@ -146,7 +146,7 @@ import{g as h,x as l}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...u.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+}`,...c.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
   args: {
     collapsible: true,
     collapsed: true
@@ -171,7 +171,7 @@ import{g as h,x as l}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...b.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+}`,...u.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
   render: args => {
     const icons = ['pencil', 'gear', 'trash', 'star', 'heart', 'bell'];
     let iconIndex = 0;
@@ -230,4 +230,4 @@ import{g as h,x as l}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...p.parameters?.docs?.source}}};const C=["Default","WithFooter","CustomizedWithCSSVariables","CollapsedByDefault","DynamicContentRedistribution"];export{b as CollapsedByDefault,u as CustomizedWithCSSVariables,d as Default,p as DynamicContentRedistribution,c as WithFooter,C as __namedExportsOrder,v as default};
+}`,...b.parameters?.docs?.source}}};const k=["Default","WithFooter","CustomizedWithCSSVariables","CollapsedByDefault","DynamicContentRedistribution"];export{u as CollapsedByDefault,c as CustomizedWithCSSVariables,i as Default,b as DynamicContentRedistribution,d as WithFooter,k as __namedExportsOrder,$ as default};