@brightspot/ui 1.11.0 → 3.0.1-cms-ui-migration.0

package/dist/storybook/assets/{LinearProgress.stories-DcIpdz6R.js → LinearProgress.stories-BqAUCgwy.js}

@@ -1,11 +1,11 @@
-import{g as D,E as h,x as T}from"./iframe-DloIUNZz.js";import{o as A}from"./style-map-DLXysq3r.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:`
+import{g as D,E as h,x as T}from"./iframe-D5Uwm8Zd.js";import{o as A}from"./style-map-Cy6U2K_U.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:k,argTypes:g}=D("btu-linear-progress"),W={title:"Components/Linear Progress",component:"btu-linear-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A horizontal progress bar for showing task completion",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>To show progress of a specific task with known completion percentage</li>
   <li>For file uploads, downloads, or processing steps</li>
   <li>When progress needs to be communicated numerically</li>
 </ul>
-        `}},actions:{handles:V},controls:{expanded:!0}},args:{...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
+        `}},actions:{handles:V},controls:{expanded:!0}},args:{...k,color:"primary",thickness:8,progress:0,"initial-animation":!0},argTypes:{...g,"--progress-color":{table:{disable:!0}},"--track-color":{table:{disable:!0}},size:{table:{disable:!0}},customSize:{table:{disable:!0}},color:{...g.color,control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"],description:"Theme color of the progress bar.",table:{category:"Attributes",defaultValue:{summary:"primary"}}},thickness:{...g.thickness,control:{type:"number",min:1,max:10},description:"Height of the progress bar.",table:{category:"Attributes",defaultValue:{summary:"8"}}},progress:{...g.progress,control:{type:"range",min:0,max:100,step:1},description:"Progress value between 0 and 100.",table:{category:"Attributes",defaultValue:{summary:"0"}}},label:{...g.label,control:{type:"text"},description:"Optional label text to display to the right of the progress bar.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},"initial-animation":{...g["initial-animation"],control:{type:"boolean"},description:"Whether to animate progress from 0 to target value when component first becomes visible in viewport. Defaults to true.",table:{category:"Attributes",defaultValue:{summary:"true"}}},ariaLabel:{...g.ariaLabel,control:{type:"text"},description:'Optional aria-label attribute for screen readers. Describes what the progress indicator represents (e.g., "File upload progress").',table:{category:"Attributes",defaultValue:{summary:"undefined"}}},ariaLabelledBy:{...g.ariaLabelledBy,control:{type:"text"},description:"Optional aria-labelledby attribute for screen readers. References the ID of an element that labels the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},ariaValueText:{...g.ariaValueText,control:{type:"text"},description:"Optional aria-valuetext attribute for screen readers. Provides human-readable text alternative for the progress value.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},completionAnnouncement:{...g.completionAnnouncement,control:{type:"text"},description:"Optional message to announce to screen readers when progress reaches 100%. If not provided, no announcement will be made on completion.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},customColor:{name:"--progress-color",control:{type:"color"},description:"Custom progress bar color - overrides the theme color",table:{category:"css properties"}},customTrackColor:{name:"--track-color",control:{type:"color"},description:"Custom track/background color - overrides default gray-100",table:{category:"css properties"}}},render:e=>{const t={};return e.customColor&&(t["--progress-color"]=e.customColor),e.customTrackColor&&(t["--track-color"]=e.customTrackColor),T`<btu-linear-progress
       color="${e.color}"
       thickness="${e.thickness}"
       progress="${e.progress}"
@@ -26,7 +26,7 @@ Animated progress bars.
 
 Top: continuous percentage increments. 
 
-Bottom: step-based progress with 20% increments every 3 seconds and \`aria-valuetext\` for accessibility (e.g., "3 of 5 files uploaded").`}}}},y={render:()=>{let e;const t=()=>{const n=document.createElement("div"),o=document.createElement("div");o.className="flex flex-col mb-4 items-center";const s=document.createElement("h3");s.className="text-lg font-semibold mb-2",s.textContent="Scroll within the container to see progress bars animate in";const r=document.createElement("button");r.textContent="Reset",r.className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600",r.onclick=()=>{e.innerHTML="",e.appendChild(t())},o.appendChild(s),o.appendChild(r),n.appendChild(o);const l=document.createElement("div");l.style.height="150px",l.style.overflowY="auto",l.style.border="1px solid #e5e7eb",l.style.borderRadius="4px",l.style.padding="1rem";const a=document.createElement("div");a.className="flex flex-col gap-8",a.style.minHeight="150vh";const i=document.createElement("btu-linear-progress");i.progress=30,i.color="primary",i.label="30%",a.appendChild(i);const p=document.createElement("div");p.style.marginTop="30vh";const d=document.createElement("btu-linear-progress");d.progress=50,d.color="teal",d.label="50%",p.appendChild(d),a.appendChild(p);const b=document.createElement("div");b.style.marginTop="30vh";const m=document.createElement("btu-linear-progress");m.progress=75,m.color="purple",m.label="75%",b.appendChild(m),a.appendChild(b);const u=document.createElement("div");u.style.marginTop="30vh";const c=document.createElement("btu-linear-progress");return c.progress=100,c.color="success",c.label="100%",u.appendChild(c),a.appendChild(u),l.appendChild(a),n.appendChild(l),n};return e=t(),e},parameters:{docs:{description:{story:'Demonstrates the viewport animation - progress bars animate from 0 to their target value when they become visible. Scroll within the container to see each progress bar animate in. Click "Reset" to restart.'}}}},C={render:()=>{const e=document.createElement("div");e.className="flex flex-col items-start gap-4";let t=0;const n=document.createElement("btu-linear-progress");n.progress=0,n.color="primary",n.label="0%";const o=document.createElement("div");o.className="text-sm text-gray-600",o.textContent="Status: In Progress...";const s=document.createElement("div");s.className="text-xs text-gray-500 mt-2",s.textContent="Event Log: (waiting for completion)",n.addEventListener("btu-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:`
+Bottom: step-based progress with 20% increments every 3 seconds and \`aria-valuetext\` for accessibility (e.g., "3 of 5 files uploaded").`}}}},y={render:()=>{let e;const t=()=>{const n=document.createElement("div"),o=document.createElement("div");o.className="flex flex-col mb-4 items-center";const s=document.createElement("h3");s.className="text-lg font-semibold mb-2",s.textContent="Scroll within the container to see progress bars animate in";const r=document.createElement("button");r.textContent="Reset",r.className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600",r.onclick=()=>{e.innerHTML="",e.appendChild(t())},o.appendChild(s),o.appendChild(r),n.appendChild(o);const l=document.createElement("div");l.style.height="150px",l.style.overflowY="auto",l.style.border="1px solid #e5e7eb",l.style.borderRadius="4px",l.style.padding="1rem";const a=document.createElement("div");a.className="flex flex-col gap-8",a.style.minHeight="150vh";const i=document.createElement("btu-linear-progress");i.progress=30,i.color="primary",i.label="30%",a.appendChild(i);const p=document.createElement("div");p.style.marginTop="30vh";const d=document.createElement("btu-linear-progress");d.progress=50,d.color="teal",d.label="50%",p.appendChild(d),a.appendChild(p);const b=document.createElement("div");b.style.marginTop="30vh";const m=document.createElement("btu-linear-progress");m.progress=75,m.color="purple",m.label="75%",b.appendChild(m),a.appendChild(b);const u=document.createElement("div");u.style.marginTop="30vh";const c=document.createElement("btu-linear-progress");return c.progress=100,c.color="success",c.label="100%",u.appendChild(c),a.appendChild(u),l.appendChild(a),n.appendChild(l),n};return e=t(),e},parameters:{docs:{description:{story:'Demonstrates the viewport animation - progress bars animate from 0 to their target value when they become visible. Scroll within the container to see each progress bar animate in. Click "Reset" to restart.'}}}},C={render:()=>{const e=document.createElement("div");e.className="flex flex-col items-start gap-4";let t=0;const n=document.createElement("btu-linear-progress");n.progress=0,n.color="primary",n.label="0%";const o=document.createElement("div");o.className="text-sm text-gray-600",o.textContent="Status: In Progress...";const s=document.createElement("div");s.className="text-xs text-gray-500 mt-2",s.textContent="Event Log: (waiting for completion)",n.addEventListener("btu-linear-progress-complete",()=>{o.textContent="Status: Complete! ✓",o.className="text-sm text-green-600 font-semibold",s.textContent=`Event Log: btu-linear-progress-complete fired at ${new Date().toLocaleTimeString()}`,s.className="text-xs text-green-600 mt-2"});let r=!1;const l=setInterval(()=>{r||(t=t+1,n.progress=t,n.label=`${t}%`,t<100&&(o.textContent="Status: In Progress...",o.className="text-sm text-gray-600"),t===100&&(r=!0,setTimeout(()=>{t=0,r=!1},3e3)))},50),a=new MutationObserver(i=>{i.forEach(p=>{p.removedNodes.forEach(d=>{(d===e||d.contains(e))&&(clearInterval(l),a.disconnect())})})});return setTimeout(()=>{e.parentNode&&a.observe(e.parentNode,{childList:!0})},0),e.appendChild(n),e.appendChild(o),e.appendChild(s),e},parameters:{docs:{description:{story:"Demonstrates the btu-linear-progress-complete event that fires when progress reaches 100%. The event fires each time progress completes a cycle."}}}},E={render:()=>{const e=document.createElement("div");e.className="flex flex-col gap-8";const t=document.createElement("div");t.className="flex flex-col gap-2";const n=document.createElement("h4");n.className="text-sm font-semibold text-gray-900",n.textContent="Progress bar with aria-label";const o=document.createElement("p");o.className="text-xs text-gray-600 mb-2",o.textContent='Screen readers announce: "Page loading progress"';const s=document.createElement("btu-linear-progress");s.progress=40,s.color="primary",s.ariaLabel="Page loading progress",t.appendChild(n),t.appendChild(o),t.appendChild(s);const r=document.createElement("div");r.className="flex flex-col gap-2";const l=document.createElement("h4");l.className="text-sm font-semibold text-gray-900",l.textContent="With custom aria-valuetext";const a=document.createElement("p");a.className="text-xs text-gray-600 mb-2",a.textContent='Screen readers announce: "File upload progress, 3 of 5 files uploaded"';const i=document.createElement("btu-linear-progress");i.progress=60,i.color="teal",i.label="3/5 files",i.ariaLabel="File upload progress",i.ariaValueText="3 of 5 files uploaded",r.appendChild(l),r.appendChild(a),r.appendChild(i);const p=document.createElement("div");p.className="flex flex-col gap-2";const d=document.createElement("h4");d.className="text-sm font-semibold text-gray-900",d.textContent="With completion announcement";const b=document.createElement("p");b.className="text-xs text-gray-600 mb-2",b.textContent='Screen readers auto-announce when complete: "Installation complete!"';const m=document.createElement("div");m.className="text-xs text-gray-500 mt-2",m.textContent="Announcement status: (waiting...)";let u=0;const c=document.createElement("btu-linear-progress");c.progress=0,c.color="success",c.label="0%",c.ariaLabel="Installation progress",c.completionAnnouncement="Installation complete!",c.addEventListener("btu-linear-progress-complete",()=>{m.textContent='Announcement status: "Installation complete!" announced at '+new Date().toLocaleTimeString(),m.className="text-xs text-green-600 mt-2"});const w=setInterval(()=>{u<100?(u+=2,c.progress=u,c.label=`${u}%`,c.ariaValueText=`${u} percent complete`):clearInterval(w)},100);p.appendChild(d),p.appendChild(b),p.appendChild(c),p.appendChild(m);const N=new MutationObserver(I=>{I.forEach(S=>{S.removedNodes.forEach(L=>{(L===e||L.contains(e))&&(clearInterval(w),N.disconnect())})})});return setTimeout(()=>{e.parentNode&&N.observe(e.parentNode,{childList:!0})},0),e.appendChild(t),e.appendChild(r),e.appendChild(p),e},parameters:{docs:{description:{story:`
 Demonstrates accessibility best practices for screen reader users:
 
 **1. Basic usage:** Set \`ariaLabel\` to describe what's progressing.
@@ -222,10 +222,10 @@ Bottom: step-based progress with 20% increments every 3 seconds and \\\`aria-val
     const eventLog = document.createElement('div');
     eventLog.className = 'text-xs text-gray-500 mt-2';
     eventLog.textContent = 'Event Log: (waiting for completion)';
-    progressEl.addEventListener('btu-progress-complete', () => {
+    progressEl.addEventListener('btu-linear-progress-complete', () => {
       statusDiv.textContent = 'Status: Complete! ✓';
       statusDiv.className = 'text-sm text-green-600 font-semibold';
-      eventLog.textContent = \`Event Log: btu-progress-complete fired at \${new Date().toLocaleTimeString()}\`;
+      eventLog.textContent = \`Event Log: btu-linear-progress-complete fired at \${new Date().toLocaleTimeString()}\`;
       eventLog.className = 'text-xs text-green-600 mt-2';
     });
     let isWaiting = false;
@@ -273,7 +273,7 @@ Bottom: step-based progress with 20% increments every 3 seconds and \\\`aria-val
   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.'
+        story: 'Demonstrates the btu-linear-progress-complete event that fires when progress reaches 100%. The event fires each time progress completes a cycle.'
       }
     }
   }
@@ -337,7 +337,7 @@ Bottom: step-based progress with 20% increments every 3 seconds and \\\`aria-val
     progress3.label = '0%';
     progress3.ariaLabel = 'Installation progress';
     progress3.completionAnnouncement = 'Installation complete!';
-    progress3.addEventListener('btu-progress-complete', () => {
+    progress3.addEventListener('btu-linear-progress-complete', () => {
       announceLog.textContent = 'Announcement status: "Installation complete!" announced at ' + new Date().toLocaleTimeString();
       announceLog.className = 'text-xs text-green-600 mt-2';
     });

package/dist/storybook/assets/{Pagination.stories-BBkLEwoP.js → Pagination.stories-CVK8mlEU.js}

@@ -1,4 +1,4 @@
-import{g as m,x as u}from"./iframe-DloIUNZz.js";import{o as g}from"./style-map-DLXysq3r.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:h,argTypes:y}=m("btu-pagination"),c=e=>{const t={};return e.customBackgroundColor&&(t["--pagination-color-background"]=e.customBackgroundColor),e.customForegroundColor&&(t["--pagination-color-foreground"]=e.customForegroundColor),t},$={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 u}from"./iframe-D5Uwm8Zd.js";import{o as g}from"./style-map-Cy6U2K_U.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:h,argTypes:y}=m("btu-pagination"),c=e=>{const t={};return e.customBackgroundColor&&(t["--pagination-color-background"]=e.customBackgroundColor),e.customForegroundColor&&(t["--pagination-color-foreground"]=e.customForegroundColor),t},$={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>
@@ -19,7 +19,7 @@ import{g as m,x as u}from"./iframe-DloIUNZz.js";import{o as g}from"./style-map-D
   <li><strong>Built-in</strong>: No <code>slot="page-size"</code> — Pagination renders its own <code>btu-dropdown</code> from <code>page-size-options</code> and manages everything automatically.</li>
   <li><strong>Custom</strong>: Provide <code>slot="page-size"</code> — built-in dropdown is suppressed. Consumer owns all behavior (events, label sync, etc.).</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 dropdowns",table:{category:"CSS Properties"}},customForegroundColor:{name:"--pagination-color-foreground",control:{type:"color"},description:"Custom foreground (text/icon) color",table:{category:"CSS Properties"}}},render:e=>u`
+        `}},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 dropdowns",table:{category:"css properties"}},customForegroundColor:{name:"--pagination-color-foreground",control:{type:"color"},description:"Custom foreground (text/icon) color",table:{category:"css properties"}}},render:e=>u`
     <btu-pagination
       total-items="${e["total-items"]??200}"
       page="${e.page??1}"
@@ -51,7 +51,7 @@ import{g as m,x as u}from"./iframe-DloIUNZz.js";import{o as g}from"./style-map-D
         slot="page-size"
         label="Week"
         variant="secondary"
-        size="small"
+        size="sm"
         aria-label="View type"
         @btu-dropdown-item-select=${t=>{t.currentTarget.label=t.detail.label}}
       >
@@ -62,7 +62,7 @@ import{g as m,x as u}from"./iframe-DloIUNZz.js";import{o as g}from"./style-map-D
       </btu-dropdown>
       <button
         slot="jumper"
-        class="btu-button btu-button-sm"
+        class="btu-button-sm btu-button"
         @click=${t=>{const n=t.target.closest("btu-pagination");n&&(n.page=1)}}
       >
         Today
@@ -142,7 +142,7 @@ import{g as m,x as u}from"./iframe-DloIUNZz.js";import{o as g}from"./style-map-D
         slot="page-size"
         label="Week"
         variant="secondary"
-        size="small"
+        size="sm"
         aria-label="View type"
         @btu-dropdown-item-select=\${(e: CustomEvent<{
     label: string;
@@ -162,7 +162,7 @@ import{g as m,x as u}from"./iframe-DloIUNZz.js";import{o as g}from"./style-map-D
       </btu-dropdown>
       <button
         slot="jumper"
-        class="btu-button btu-button-sm"
+        class="btu-button-sm btu-button"
         @click=\${(e: Event) => {
     const pagination = (e.target as HTMLElement).closest('btu-pagination');
     if (pagination) pagination.page = 1;

package/dist/storybook/assets/{Popover.stories-DLv48c2h.js → Popover.stories-CC2R-jiv.js}

@@ -1,4 +1,4 @@
-import{g as a,x as r}from"./iframe-DloIUNZz.js";import{o as c}from"./if-defined-B1RdczOE.js";import{o as d}from"./style-map-DLXysq3r.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:`
+import{g as p,x as l}from"./iframe-D5Uwm8Zd.js";import{o as a}from"./if-defined-C1_PRAyA.js";import{o as c}from"./style-map-Cy6U2K_U.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:u,argTypes:t}=p("btu-popover"),h={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,18 +24,18 @@ import{g as a,x as r}from"./iframe-DloIUNZz.js";import{o as c}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:{...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`
+        `}},actions:{handles:d},controls:{expanded:!0}},args:{...u,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 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 e={};return o.customBg&&(e["--popover-color-background"]=o.customBg),o.customTitleColor&&(e["--popover-color-title"]=o.customTitleColor),o.customContentColor&&(e["--popover-color-content"]=o.customContentColor),o.customRadius&&(e["--popover-border-radius"]=o.customRadius),l`
       <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
-        <div style=${d(t)}>
+        <div style=${c(e)}>
           <btu-popover
             position="${o.position}"
             trigger="${o.trigger}"
             delay="${o.delay}"
-            offset="${c(o.offset)}"
+            offset="${a(o.offset)}"
             ?no-arrow="${o.noArrow}"
             ?open="${o.open}"
           >
-            <button class="popover-trigger" slot="trigger">
+            <button class="btu-button-gray btu-button-sm btu-button" slot="trigger">
               ${o.trigger==="hover"?"Hover me":o.trigger==="focus"?"Focus me":"Click me"}
             </button>
             <div slot="content">
@@ -48,51 +48,28 @@ import{g as a,x as r}from"./iframe-DloIUNZz.js";import{o as c}from"./if-defined-
           </btu-popover>
         </div>
       </div>
-    `}},p=`
-  .popover-trigger {
-    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: pointer;
-    user-select: none;
-    border: 1px solid oklch(var(--btu-theme-gray-200));
-  }
-  .popover-trigger:hover {
-    background-color: oklch(var(--btu-theme-gray-200));
-  }
-`,n={args:{noArrow:!1,offset:void 0},decorators:[o=>r`<style>
-          ${p}</style
-        >${o()}`]},i={render:()=>r`
-    <style>
-      ${p}
-    </style>
+    `}},n={args:{noArrow:!1,offset:void 0}},r={render:()=>l`
     <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
       <btu-popover position="top">
-        <button class="popover-trigger" slot="trigger">Top</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Top</button>
         <div slot="content">Popover positioned above the trigger</div>
       </btu-popover>
       <btu-popover position="bottom">
-        <button class="popover-trigger" slot="trigger">Bottom</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Bottom</button>
         <div slot="content">Popover positioned below the trigger</div>
       </btu-popover>
       <btu-popover position="left">
-        <button class="popover-trigger" slot="trigger">Left</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Left</button>
         <div slot="content">Popover positioned left of the trigger</div>
       </btu-popover>
       <btu-popover position="right">
-        <button class="popover-trigger" slot="trigger">Right</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Right</button>
         <div slot="content">Popover positioned right of the trigger</div>
       </btu-popover>
     </div>
-  `,parameters:{docs:{description:{story:"Popovers support four positions: `top`, `bottom`, `left`, and `right`. Each auto-flips if constrained by the viewport."}}}},s={render:()=>r`
+  `,parameters:{docs:{description:{story:"Popovers support four positions: `top`, `bottom`, `left`, and `right`. Each auto-flips if constrained by the viewport."}}}},i={render:()=>l`
     <style>
-      ${p} .popover-custom-content {
+      .popover-custom-content {
         display: flex;
         flex-direction: column;
         gap: 12px;
@@ -141,20 +118,20 @@ import{g as a,x as r}from"./iframe-DloIUNZz.js";import{o as c}from"./if-defined-
     </style>
     <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
       <btu-popover position="bottom">
-        <button class="btu-button btu-button-error" slot="trigger">Delete item</button>
+        <button class="btu-button-error btu-button" slot="trigger">Delete item</button>
         <div slot="content">
           <div class="popover-custom-content">
             <h3>Confirm Delete</h3>
             <p>Are you sure you want to delete this item? This action cannot be undone.</p>
             <div class="actions">
-              <button class="btu-button btu-button-warning btu-button-xs">Cancel</button>
-              <button class="btu-button btu-button-error btu-button-xs btu-button-fill-none">Delete</button>
+              <button class="btu-button-warning btu-button-xs btu-button">Cancel</button>
+              <button class="btu-button-error btu-button-xs btu-button-fill-none btu-button">Delete</button>
             </div>
           </div>
         </div>
       </btu-popover>
       <btu-popover trigger="hover" delay="200" position="bottom">
-        <button class="btu-button btu-button-primary" slot="trigger">Hover for chart data</button>
+        <button class="btu-button-primary btu-button" slot="trigger">Hover for chart data</button>
         <div slot="content">
           <div
             style="font-weight: 500; font-size: 0.75rem; line-height: 1.125rem; color: oklch(var(--btu-theme-gray-900)); margin-bottom: 8px;"
@@ -182,9 +159,9 @@ import{g as a,x as r}from"./iframe-DloIUNZz.js";import{o as c}from"./if-defined-
         </div>
       </btu-popover>
     </div>
-  `,parameters:{docs:{description:{story:"Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger)."}}}},l={render:()=>r`
+  `,parameters:{docs:{description:{story:"Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger)."}}}},s={render:()=>l`
     <style>
-      ${p} .custom-popover-trigger {
+      .custom-popover-trigger {
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -228,30 +205,24 @@ import{g as a,x as r}from"./iframe-DloIUNZz.js";import{o as c}from"./if-defined-
   args: {
     noArrow: false,
     offset: undefined
-  },
-  decorators: [story => html\`<style>
-          \${triggerStyle}</style
-        >\${story()}\`]
-}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  }
+}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
   render: () => html\`
-    <style>
-      \${triggerStyle}
-    </style>
     <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
       <btu-popover position="top">
-        <button class="popover-trigger" slot="trigger">Top</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Top</button>
         <div slot="content">Popover positioned above the trigger</div>
       </btu-popover>
       <btu-popover position="bottom">
-        <button class="popover-trigger" slot="trigger">Bottom</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Bottom</button>
         <div slot="content">Popover positioned below the trigger</div>
       </btu-popover>
       <btu-popover position="left">
-        <button class="popover-trigger" slot="trigger">Left</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Left</button>
         <div slot="content">Popover positioned left of the trigger</div>
       </btu-popover>
       <btu-popover position="right">
-        <button class="popover-trigger" slot="trigger">Right</button>
+        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Right</button>
         <div slot="content">Popover positioned right of the trigger</div>
       </btu-popover>
     </div>
@@ -263,10 +234,10 @@ import{g as a,x as r}from"./iframe-DloIUNZz.js";import{o as c}from"./if-defined-
       }
     }
   }
-}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+}`,...r.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <style>
-      \${triggerStyle} .popover-custom-content {
+      .popover-custom-content {
         display: flex;
         flex-direction: column;
         gap: 12px;
@@ -315,20 +286,20 @@ import{g as a,x as r}from"./iframe-DloIUNZz.js";import{o as c}from"./if-defined-
     </style>
     <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
       <btu-popover position="bottom">
-        <button class="btu-button btu-button-error" slot="trigger">Delete item</button>
+        <button class="btu-button-error btu-button" slot="trigger">Delete item</button>
         <div slot="content">
           <div class="popover-custom-content">
             <h3>Confirm Delete</h3>
             <p>Are you sure you want to delete this item? This action cannot be undone.</p>
             <div class="actions">
-              <button class="btu-button btu-button-warning btu-button-xs">Cancel</button>
-              <button class="btu-button btu-button-error btu-button-xs btu-button-fill-none">Delete</button>
+              <button class="btu-button-warning btu-button-xs btu-button">Cancel</button>
+              <button class="btu-button-error btu-button-xs btu-button-fill-none btu-button">Delete</button>
             </div>
           </div>
         </div>
       </btu-popover>
       <btu-popover trigger="hover" delay="200" position="bottom">
-        <button class="btu-button btu-button-primary" slot="trigger">Hover for chart data</button>
+        <button class="btu-button-primary btu-button" slot="trigger">Hover for chart data</button>
         <div slot="content">
           <div
             style="font-weight: 500; font-size: 0.75rem; line-height: 1.125rem; color: oklch(var(--btu-theme-gray-900)); margin-bottom: 8px;"
@@ -364,10 +335,10 @@ import{g as a,x as r}from"./iframe-DloIUNZz.js";import{o as c}from"./if-defined-
       }
     }
   }
-}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <style>
-      \${triggerStyle} .custom-popover-trigger {
+      .custom-popover-trigger {
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -420,4 +391,4 @@ import{g as a,x as r}from"./iframe-DloIUNZz.js";import{o as c}from"./if-defined-
       }
     }
   }
-}`,...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};
+}`,...s.parameters?.docs?.source}}};const f=["Default","Positions","RichContent","AdvancedUsage"];export{s as AdvancedUsage,n as Default,r as Positions,i as RichContent,f as __namedExportsOrder,h as default};

package/dist/storybook/assets/ReadyMixin-CAkCCAOH.js

@@ -0,0 +1 @@
+import"./iframe-D5Uwm8Zd.js";const l=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){const a=new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:c});return this.dispatchEvent(a)}}return n},d=t=>{class n extends t{connectedCallback(){const e=()=>{super.connectedCallback()};document.readyState!=="loading"?e():document.addEventListener("DOMContentLoaded",()=>e())}}return n};export{l as E,d as R};

package/dist/storybook/assets/{RovingTabindexMixin.stories-BWaFx9mu.js → RovingTabindexMixin.stories-Dgm5izU_.js}

@@ -1,4 +1,4 @@
-import{x as l,i as v}from"./iframe-DloIUNZz.js";import{t as m}from"./custom-element-UsVr97OX.js";import"./preload-helper-PPVm8Dsz.js";const h=n=>{class i extends n{constructor(){super(...arguments),this._rovingIndex=0}_getRovingTargets(){return[]}_rovingFocus(t,e=!0){const o=this._getRovingTargets();if(o.length===0)return;const r=Math.max(0,Math.min(t,o.length-1));o.forEach((u,b)=>u.setAttribute("tabindex",b===r?"0":"-1")),e&&o[r]?.focus(),this._rovingIndex=r}_rovingNext(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e<t.length-1?e+1:0;this._rovingFocus(o)}_rovingPrev(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e>0?e-1:t.length-1;this._rovingFocus(o)}_rovingFirst(){this._rovingFocus(0)}_rovingLast(){const t=this._getRovingTargets();t.length>0&&this._rovingFocus(t.length-1)}_rovingCurrentIndex(){const t=document.activeElement;return this._getRovingTargets().findIndex(e=>e===t||e.contains(t))}}return i};var a=Object.freeze,x=Object.defineProperty,p=Object.getOwnPropertyDescriptor,f=(n,i,d,t)=>{for(var e=t>1?void 0:t?p(i,d):i,o=n.length-1,r;o>=0;o--)(r=n[o])&&(e=r(e)||e);return e},y=(n,i)=>a(x(n,"raw",{value:a(n.slice())})),c;const T={title:"Mixins/Roving Tabindex",tags:["autodocs"],parameters:{docs:{description:{component:`
+import{x as l,i as v}from"./iframe-D5Uwm8Zd.js";import{t as m}from"./custom-element-UsVr97OX.js";import"./preload-helper-PPVm8Dsz.js";const h=n=>{class i extends n{constructor(){super(...arguments),this._rovingIndex=0}_getRovingTargets(){return[]}_rovingFocus(t,e=!0){const o=this._getRovingTargets();if(o.length===0)return;const r=Math.max(0,Math.min(t,o.length-1));o.forEach((u,b)=>u.setAttribute("tabindex",b===r?"0":"-1")),e&&o[r]?.focus(),this._rovingIndex=r}_rovingNext(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e<t.length-1?e+1:0;this._rovingFocus(o)}_rovingPrev(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e>0?e-1:t.length-1;this._rovingFocus(o)}_rovingFirst(){this._rovingFocus(0)}_rovingLast(){const t=this._getRovingTargets();t.length>0&&this._rovingFocus(t.length-1)}_rovingCurrentIndex(){const t=document.activeElement;return this._getRovingTargets().findIndex(e=>e===t||e.contains(t))}}return i};var a=Object.freeze,x=Object.defineProperty,p=Object.getOwnPropertyDescriptor,f=(n,i,d,t)=>{for(var e=t>1?void 0:t?p(i,d):i,o=n.length-1,r;o>=0;o--)(r=n[o])&&(e=r(e)||e);return e},y=(n,i)=>a(x(n,"raw",{value:a(n.slice())})),c;const T={title:"Mixins/Roving Tabindex",tags:["autodocs"],parameters:{docs:{description:{component:`
 \`RovingTabindexMixin\` provides **roving tabindex** navigation primitives for toolbar and menu components following the <a href="https://www.w3.org/WAI/ARIA/apd/practices/keyboard-interface/#kbd_roving_tabindex" target="_blank">WAI-ARIA Keyboard Interface Pattern</a>.
 
 In a roving tabindex, only one element in the group has \`tabindex="0"\` (reachable via Tab), while all others have \`tabindex="-1"\`. Arrow keys move focus between items, wrapping at both ends.
@@ -109,11 +109,11 @@ class MyComponent extends RovingTabindexMixin(EventEmitterMixin(ReadyMixin(LitEl
 \`\`\`
         `}}}};let g=class extends h(v){constructor(){super(...arguments),this._handleKeydown=n=>{switch(n.key){case"ArrowRight":n.preventDefault(),this._rovingNext();break;case"ArrowLeft":n.preventDefault(),this._rovingPrev();break;case"Home":n.preventDefault(),this._rovingFirst();break;case"End":n.preventDefault(),this._rovingLast();break}}}createRenderRoot(){return this}_getRovingTargets(){return Array.from(this.querySelectorAll(".roving-demo-btn"))}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeydown)}render(){return l`
       <div role="toolbar" aria-label="Demo toolbar" style="display: flex; gap: 0.5rem;">
-        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="0">Item 1</button>
-        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="-1">Item 2</button>
-        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="-1">Item 3</button>
-        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="-1">Item 4</button>
-        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="-1">Item 5</button>
+        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="0">Item 1</button>
+        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="-1">Item 2</button>
+        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="-1">Item 3</button>
+        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="-1">Item 4</button>
+        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="-1">Item 5</button>
       </div>
     `}};g=f([m("roving-demo")],g);const s={render:()=>l(c||(c=y([`<div class="flex flex-col gap-4">
       <div>

package/dist/storybook/assets/{Rtc.stories-Ve7Bwo_l.js → Rtc.stories-D9uVCq71.js}

@@ -1,4 +1,4 @@
-import{x as o}from"./iframe-DloIUNZz.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-D5Uwm8Zd.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>
@@ -11,7 +11,7 @@ import{x as o}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";co
 
       <div class="rounded border border-gray-200 bg-gray-50 p-4">
         <h4 class="mb-2 font-bold">Architecture Diagram</h4>
-        <pre class="text-xs leading-relaxed text-gray-700">
+        <pre class="leading-relaxed text-xs text-gray-700">
 ┌─────────────────────────────────────────────────┐
 │                  CMS Server                     │
 │              (Server-Sent Events)               │
@@ -143,7 +143,7 @@ rtc.execute('com.example.MyAction', { id: '123', value: 'updated' })</code></pre
 
       <div class="rounded border border-gray-200 bg-gray-50 p-4">
         <h4 class="mb-2 font-bold">Architecture Diagram</h4>
-        <pre class="text-xs leading-relaxed text-gray-700">
+        <pre class="leading-relaxed text-xs text-gray-700">
 ┌─────────────────────────────────────────────────┐
 │                  CMS Server                     │
 │              (Server-Sent Events)               │

package/dist/storybook/assets/{ScrollShadow.stories-C6XmrRLm.js → ScrollShadow.stories-D5GJ6Zes.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-DloIUNZz.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-D5Uwm8Zd.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:   ;
@@ -6,7 +6,7 @@ import{x as a}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";co
     </style>
     <div class=${["flex","gap-2","bg-gray-500",e].join(" ")}>
       ${r.map((s,t)=>a`<div
-            class="text-md flex aspect-square h-[100px] items-center justify-center"
+            class="flex aspect-square h-[100px] items-center justify-center text-md"
             style="background:oklch(80% 50% ${Math.floor(Math.random()*710)+10});"
           >
             ${s}

package/dist/storybook/assets/{Switch.stories-Cf8WM1LG.js → Switch.stories-D7HV0v6i.js}

@@ -1,4 +1,4 @@
-import{g as k,x as c}from"./iframe-DloIUNZz.js";import{o as s}from"./if-defined-B1RdczOE.js";import{o as f}from"./style-map-DLXysq3r.js";import{L as w}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:v,args:y,argTypes:g}=k("btu-switch"),x={customColorOn:"--switch-color-track-on",customColorOff:"--switch-color-track-off",customKnobColor:"--switch-color-knob",customLabelSpacing:"--switch-label-spacing",customIconSize:"--switch-track-icon-size"},S=e=>Object.entries(x).reduce((o,[t,n])=>(e[t]&&(o[n]=e[t]),o),{}),L={title:"Components/Switch",component:"btu-switch",tags:["autodocs"],parameters:{docs:{subtitle:"A toggle switch for binary on/off states",description:{component:`
+import{g as k,x as c}from"./iframe-D5Uwm8Zd.js";import{o as s}from"./if-defined-C1_PRAyA.js";import{o as f}from"./style-map-Cy6U2K_U.js";import{L as w}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:v,args:y,argTypes:g}=k("btu-switch"),x={customColorOn:"--switch-color-track-on",customColorOff:"--switch-color-track-off",customKnobColor:"--switch-color-knob",customLabelSpacing:"--switch-label-spacing",customIconSize:"--switch-track-icon-size"},S=e=>Object.entries(x).reduce((o,[t,n])=>(e[t]&&(o[n]=e[t]),o),{}),L={title:"Components/Switch",component:"btu-switch",tags:["autodocs"],parameters:{docs:{subtitle:"A toggle switch for binary on/off states",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>For toggling a setting or preference on/off</li>
@@ -7,9 +7,9 @@ import{g as k,x as c}from"./iframe-DloIUNZz.js";import{o as s}from"./if-defined-
 </ul>
 
 <p>Track icons are powered by the <a href="?path=/docs/components-icon--docs">Icon component</a>. Visit its docs for all available icon names.</p>
-        `}},actions:{handles:v},controls:{expanded:!0}},args:{...y,label:"Label",checked:!1},argTypes:{...g,"--switch-color-track-on":{table:{disable:!0}},"--switch-color-track-off":{table:{disable:!0}},"--switch-color-knob":{table:{disable:!0}},"--switch-label-spacing":{table:{disable:!0}},"--switch-icon-size":{table:{disable:!0}},"--switch-track-icon-size":{table:{disable:!0}},customColorOn:{name:"--switch-color-track-on",control:{type:"color"},description:"Background color when the toggle is checked",table:{category:"CSS Properties"}},customColorOff:{name:"--switch-color-track-off",control:{type:"color"},description:"Background color when the toggle is unchecked",table:{category:"CSS Properties"}},customKnobColor:{name:"--switch-color-knob",control:{type:"color"},description:"Color of the sliding circular handle",table:{category:"CSS Properties"}},customLabelSpacing:{name:"--switch-label-spacing",control:{type:"text"},description:"Distance between the switch and the text label (default: 0.75rem)",table:{category:"CSS Properties"}},"on-icon":{...g["on-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when checked. Only icons available in Lucide v'+w+" are supported."},"off-icon":{...g["off-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when unchecked. Only icons available in Lucide v'+w+" are supported."},customIconSize:{name:"--switch-track-icon-size",control:{type:"text"},description:"Size of the track icons (e.g., `0.5rem`, `0.75rem`, `1rem`). Defaults: sm `0.5rem`, md `0.625rem`, lg `0.75rem`.",table:{category:"CSS Properties"}}},render:e=>c`
+        `}},actions:{handles:v},controls:{expanded:!0}},args:{...y,label:"Label",checked:!1},argTypes:{...g,"--switch-color-track-on":{table:{disable:!0}},"--switch-color-track-off":{table:{disable:!0}},"--switch-color-knob":{table:{disable:!0}},"--switch-label-spacing":{table:{disable:!0}},"--switch-icon-size":{table:{disable:!0}},"--switch-track-icon-size":{table:{disable:!0}},customColorOn:{name:"--switch-color-track-on",control:{type:"color"},description:"Background color when the toggle is checked",table:{category:"css properties"}},customColorOff:{name:"--switch-color-track-off",control:{type:"color"},description:"Background color when the toggle is unchecked",table:{category:"css properties"}},customKnobColor:{name:"--switch-color-knob",control:{type:"color"},description:"Color of the sliding circular handle",table:{category:"css properties"}},customLabelSpacing:{name:"--switch-label-spacing",control:{type:"text"},description:"Distance between the switch and the text label (default: 0.75rem)",table:{category:"css properties"}},"on-icon":{...g["on-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when checked. Only icons available in Lucide v'+w+" are supported."},"off-icon":{...g["off-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when unchecked. Only icons available in Lucide v'+w+" are supported."},customIconSize:{name:"--switch-track-icon-size",control:{type:"text"},description:"Size of the track icons (e.g., `0.5rem`, `0.75rem`, `1rem`). Defaults: sm `0.5rem`, md `0.625rem`, lg `0.75rem`.",table:{category:"css properties"}}},render:e=>c`
     <btu-switch
-      size=${e.size??"small"}
+      size=${e.size??"sm"}
       label=${s(e.label)}
       description=${s(e.description)}
       label-position=${e["label-position"]??"end"}
@@ -20,17 +20,17 @@ import{g as k,x as c}from"./iframe-DloIUNZz.js";import{o as s}from"./if-defined-
       ?disabled=${e.disabled}
       style=${f(S(e))}
     ></btu-switch>
-  `},i={args:{}},a={args:{checked:!0,label:"Enabled"},parameters:{docs:{description:{story:"Switch in the checked/on state. The track uses `--switch-color-track-on` (defaults to primary-700)."}}}},r={args:{label:"Enable notifications",description:"Receive updates via email",checked:!0},parameters:{docs:{description:{story:"Switch with both a primary label and a secondary description."}}}},l={args:{label:"Unavailable option",disabled:!0},parameters:{docs:{description:{story:"Disabled state via the `disabled` attribute. The track opacity is reduced and the wrapper cursor changes to `not-allowed`."}}}},d={args:{label:"Previously enabled",disabled:!0,checked:!0},parameters:{docs:{description:{story:"Disabled switch in the checked state. Useful for showing a locked-on setting."}}}},h={args:{label:"Label on the left","label-position":"start"},parameters:{docs:{description:{story:'Place the label before the switch using `label-position="start"`.'}}}},u={args:{label:"Notifications",checked:!0,"on-icon":"check","off-icon":"x"},parameters:{docs:{description:{story:"Track icons via `on-icon` and `off-icon` attributes. Icons use Lucide names (e.g., `check`, `x`, `bell`, `bell-off`)."}}}},m={render:()=>c`
+  `},i={args:{}},a={args:{checked:!0,label:"Enabled"},parameters:{docs:{description:{story:"Switch in the checked/on state. The track uses `--switch-color-track-on` (defaults to primary-700)."}}}},r={args:{label:"Enable notifications",description:"Receive updates via email",checked:!0},parameters:{docs:{description:{story:"Switch with both a primary label and a secondary description."}}}},l={args:{label:"Unavailable option",disabled:!0},parameters:{docs:{description:{story:"Disabled state via the `disabled` attribute. The track opacity is reduced and the wrapper cursor changes to `not-allowed`."}}}},d={args:{label:"Previously enabled",disabled:!0,checked:!0},parameters:{docs:{description:{story:"Disabled switch in the checked state. Useful for showing a locked-on setting."}}}},h={args:{label:"Label on the left","label-position":"start"},parameters:{docs:{description:{story:'Place the label before the switch using `label-position="start"`.'}}}},u={args:{label:"Notifications",checked:!0,"on-icon":"check","off-icon":"x"},parameters:{docs:{description:{story:"Track icons via `on-icon` and `off-icon` attributes. Icons use Lucide names (e.g., `check`, `x`, `bell`, `bell-off`)."}}}},b={render:()=>c`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
-      ${["small","medium","large"].map(e=>c`
+      ${["sm","md","lg"].map(e=>c`
           <btu-switch size=${e} label="${e} with icons" on-icon="check" off-icon="x" checked></btu-switch>
         `)}
     </div>
-  `,parameters:{docs:{description:{story:"Track icons scale automatically with the switch size."}}}},b={render:()=>c`
+  `,parameters:{docs:{description:{story:"Track icons scale automatically with the switch size."}}}},m={render:()=>c`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
-      ${["small","medium","large"].map(e=>c` <btu-switch size=${e} label="${e} size" checked></btu-switch> `)}
+      ${["sm","md","lg"].map(e=>c` <btu-switch size=${e} label="${e} size" checked></btu-switch> `)}
     </div>
-  `,parameters:{docs:{description:{story:"The three available size variants: `small` (default), `medium`, and `large`."}}}},p={render:()=>c`
+  `,parameters:{docs:{description:{story:"The three available size variants: `sm` (default), `md`, and `lg`."}}}},p={render:()=>c`
     <div class="flex flex-col gap-6">
       <div class="flex flex-col gap-2">
         <strong>Custom colors:</strong>
@@ -71,7 +71,7 @@ import{g as k,x as c}from"./iframe-DloIUNZz.js";import{o as s}from"./if-defined-
           <btu-switch label="Email notifications" name="email" checked></btu-switch>
           <btu-switch label="SMS notifications" name="sms"></btu-switch>
           <btu-switch label="Push notifications" name="push" checked></btu-switch>
-          <button type="submit" class="btu-button btu-button-sm w-fit">Submit</button>
+          <button type="submit" class="btu-button-sm btu-button w-fit">Submit</button>
           <pre class="form-output text-xs text-gray-600"></pre>
         </form>
       </div>
@@ -88,9 +88,9 @@ import{g as k,x as c}from"./iframe-DloIUNZz.js";import{o as s}from"./if-defined-
       <div class="flex flex-col gap-2">
         <strong>Programmatic control:</strong>
         <div class="flex items-center gap-4">
-          <btu-switch id="programmatic-switch" label="Controlled switch" size="medium"></btu-switch>
+          <btu-switch id="programmatic-switch" label="Controlled switch" size="md"></btu-switch>
           <button
-            class="btu-button btu-button-sm"
+            class="btu-button-sm btu-button"
             @click=${()=>{const e=document.getElementById("programmatic-switch");e&&(e.checked=!e.checked)}}
           >
             Toggle externally
@@ -176,10 +176,10 @@ import{g as k,x as c}from"./iframe-DloIUNZz.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+}`,...u.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
-      \${(['small', 'medium', 'large'] as const).map(size => html\`
+      \${(['sm', 'md', 'lg'] as const).map(size => html\`
           <btu-switch size=\${size} label="\${size} with icons" on-icon="check" off-icon="x" checked></btu-switch>
         \`)}
     </div>
@@ -191,20 +191,20 @@ import{g as k,x as c}from"./iframe-DloIUNZz.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...m.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+}`,...b.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
-      \${(['small', 'medium', 'large'] as const).map(size => html\` <btu-switch size=\${size} label="\${size} size" checked></btu-switch> \`)}
+      \${(['sm', 'md', 'lg'] as const).map(size => html\` <btu-switch size=\${size} label="\${size} size" checked></btu-switch> \`)}
     </div>
   \`,
   parameters: {
     docs: {
       description: {
-        story: 'The three available size variants: \`small\` (default), \`medium\`, and \`large\`.'
+        story: 'The three available size variants: \`sm\` (default), \`md\`, and \`lg\`.'
       }
     }
   }
-}`,...b.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+}`,...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-col gap-6">
       <div class="flex flex-col gap-2">
@@ -264,7 +264,7 @@ import{g as k,x as c}from"./iframe-DloIUNZz.js";import{o as s}from"./if-defined-
           <btu-switch label="Email notifications" name="email" checked></btu-switch>
           <btu-switch label="SMS notifications" name="sms"></btu-switch>
           <btu-switch label="Push notifications" name="push" checked></btu-switch>
-          <button type="submit" class="btu-button btu-button-sm w-fit">Submit</button>
+          <button type="submit" class="btu-button-sm btu-button w-fit">Submit</button>
           <pre class="form-output text-xs text-gray-600"></pre>
         </form>
       </div>
@@ -281,9 +281,9 @@ import{g as k,x as c}from"./iframe-DloIUNZz.js";import{o as s}from"./if-defined-
       <div class="flex flex-col gap-2">
         <strong>Programmatic control:</strong>
         <div class="flex items-center gap-4">
-          <btu-switch id="programmatic-switch" label="Controlled switch" size="medium"></btu-switch>
+          <btu-switch id="programmatic-switch" label="Controlled switch" size="md"></btu-switch>
           <button
-            class="btu-button btu-button-sm"
+            class="btu-button-sm btu-button"
             @click=\${() => {
     const sw = document.getElementById('programmatic-switch') as HTMLElement & {
       checked: boolean;
@@ -309,4 +309,4 @@ import{g as k,x as c}from"./iframe-DloIUNZz.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...p.parameters?.docs?.source}}};const D=["Default","Checked","WithDescription","Disabled","DisabledChecked","LabelStart","WithIcons","WithIconsSizes","Sizes","AdvancedUsage"];export{p as AdvancedUsage,a as Checked,i as Default,l as Disabled,d as DisabledChecked,h as LabelStart,b as Sizes,r as WithDescription,u as WithIcons,m as WithIconsSizes,D as __namedExportsOrder,L as default};
+}`,...p.parameters?.docs?.source}}};const D=["Default","Checked","WithDescription","Disabled","DisabledChecked","LabelStart","WithIcons","WithIconsSizes","Sizes","AdvancedUsage"];export{p as AdvancedUsage,a as Checked,i as Default,l as Disabled,d as DisabledChecked,h as LabelStart,m as Sizes,r as WithDescription,u as WithIcons,b as WithIconsSizes,D as __namedExportsOrder,L as default};