@brightspot/ui 5.0.3-toggleable-fix.0 → 5.0.3

package/dist/storybook/assets/{Dropdown.stories-DAVkpuM5.js → Dropdown.stories-B862-mco.js}

@@ -1,4 +1,4 @@
-import{g as S,x as t}from"./iframe-C3TUQi31.js";import{o as f}from"./style-map-ADugLljH.js";import"./preload-helper-PPVm8Dsz.js";const{events:O,args:A,argTypes:n}=S("btu-dropdown"),B={title:"Components/Dropdown",component:"btu-dropdown",tags:["autodocs"],parameters:{docs:{subtitle:"btu-dropdown",description:{component:`
+import{g as S,x as t}from"./iframe-CufEXQ5F.js";import{o as f}from"./style-map-BkaK9546.js";import"./preload-helper-PPVm8Dsz.js";const{events:O,args:A,argTypes:n}=S("btu-dropdown"),B={title:"Components/Dropdown",component:"btu-dropdown",tags:["autodocs"],parameters:{docs:{subtitle:"btu-dropdown",description:{component:`
 A dropdown menu component that renders a trigger button and manages a floating panel
 containing a \`btu-dropdown-menu\` with \`btu-dropdown-item\` children.
 
@@ -271,7 +271,7 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
   `,parameters:{docs:{description:{story:'When a menu has no focusable items, an empty state message is displayed. Customize with the `empty-message` attribute (default: "No items available").'}}}},h={render:()=>t`
     <div style="display: flex; gap: 1rem; align-items: center;">
       <button
-        class="btu-button-primary btu-button-md btu-button"
+        class="btu-button btu-button-primary btu-button-md"
         @click=${o=>{const e=o.target.parentElement?.querySelector("btu-dropdown");e&&(e.open=!e.open)}}
       >
         Toggle Dropdown
@@ -657,7 +657,7 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
   render: () => html\`
     <div style="display: flex; gap: 1rem; align-items: center;">
       <button
-        class="btu-button-primary btu-button-md btu-button"
+        class="btu-button btu-button-primary btu-button-md"
         @click=\${(e: Event) => {
     const dropdown = (e.target as HTMLElement).parentElement?.querySelector('btu-dropdown');
     if (dropdown) dropdown.open = !dropdown.open;

package/dist/storybook/assets/{EmptyState.stories-Buexv2C4.js → EmptyState.stories-Im3Vr4ZL.js}

@@ -1,4 +1,4 @@
-import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as m}from"./if-defined-BkzXcv-a.js";import{o as h}from"./style-map-ADugLljH.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:g,argTypes:s}=u("btu-empty-state"),y=["sm","md","lg"],v=[1,2,3,4,5,6],k={title:"Components/Empty State",component:"btu-empty-state",tags:["autodocs"],parameters:{docs:{subtitle:"A standardized component for communicating the absence of content.",description:{component:`
+import{g as u,x as e}from"./iframe-CufEXQ5F.js";import{o as m}from"./if-defined-f_e-RnGa.js";import{o as h}from"./style-map-BkaK9546.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:g,argTypes:s}=u("btu-empty-state"),y=["sm","md","lg"],v=[1,2,3,4,5,6],k={title:"Components/Empty State",component:"btu-empty-state",tags:["autodocs"],parameters:{docs:{subtitle:"A standardized component for communicating the absence of content.",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>To communicate the absence of content in tables, lists, or search results</li>
@@ -33,8 +33,8 @@ import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as m}from"./if-defined-
           emphasize="pulse"
           style="color: oklch(var(--btu-theme-primary-600))"
         ></btu-icon>
-        <button slot="actions" class="btu-button-gray btu-button">Clear search</button>
-        <button slot="actions" class="btu-button-primary btu-button">
+        <button slot="actions" class="btu-button btu-button-gray">Clear search</button>
+        <button slot="actions" class="btu-button btu-button-primary">
           <btu-icon symbol="plus"></btu-icon>Create new
         </button>
       </btu-empty-state>
@@ -56,12 +56,12 @@ import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as m}from"./if-defined-
         emphasize="pulse"
         style="color: oklch(var(--btu-theme-primary-600))"
       ></btu-icon>
-      <button slot="actions" class="btu-button-primary btu-button">Get started</button>
+      <button slot="actions" class="btu-button btu-button-primary">Get started</button>
     </btu-empty-state>
   `,parameters:{docs:{description:{story:"Large variant for full-page empty states. Ideal for dashboards, landing pages, and first-run experiences where the empty state is the primary content."}}}},r={render:()=>e`
     <btu-empty-state heading="No images uploaded" description="Upload images to see them displayed here." size="md">
       <img slot="graphic" src="cloud-illustration.svg" alt="Cloud graphic" />
-      <button slot="actions" class="btu-button-primary btu-button">Upload image</button>
+      <button slot="actions" class="btu-button btu-button-primary">Upload image</button>
     </btu-empty-state>
   `,parameters:{docs:{description:{story:"Uses a custom SVG in the graphic slot instead of a `btu-icon`. The graphic container automatically sizes `img`, `picture`, and `svg` elements larger than icons."}}}},c={render:()=>{const t=e`
       <picture slot="graphic">
@@ -85,7 +85,7 @@ import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as m}from"./if-defined-
         <div style="width: 240px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
           <btu-empty-state heading="No results" description="Try a different query." size="sm">
             ${t}
-            <button slot="actions" class="btu-button-gray btu-button-sm btu-button">Clear</button>
+            <button slot="actions" class="btu-button btu-button-gray btu-button-sm">Clear</button>
           </btu-empty-state>
         </div>
         <div style="width: 360px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
@@ -95,7 +95,7 @@ import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as m}from"./if-defined-
             size="md"
           >
             ${t}
-            <button slot="actions" class="btu-button-primary btu-button">Upload image</button>
+            <button slot="actions" class="btu-button btu-button-primary">Upload image</button>
           </btu-empty-state>
         </div>
         <div style="width: 520px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
@@ -105,7 +105,7 @@ import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as m}from"./if-defined-
             size="lg"
           >
             ${t}
-            <button slot="actions" class="btu-button-primary btu-button">Get started</button>
+            <button slot="actions" class="btu-button btu-button-primary">Get started</button>
           </btu-empty-state>
         </div>
       </div>
@@ -132,7 +132,7 @@ import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as m}from"./if-defined-
         emphasize="pulse"
         style="color: oklch(var(--btu-theme-gray-500))"
       ></btu-icon>
-      <button slot="actions" class="btu-button-success btu-button-sm btu-button">Add item</button>
+      <button slot="actions" class="btu-button btu-button-success btu-button-sm">Add item</button>
     </btu-empty-state>
   `,parameters:{docs:{description:{story:"Empty state with heading and actions but no description. The description is omitted by not setting the `description` attribute."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
   args: {
@@ -176,7 +176,7 @@ import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as m}from"./if-defined-
         emphasize="pulse"
         style="color: oklch(var(--btu-theme-primary-600))"
       ></btu-icon>
-      <button slot="actions" class="btu-button-primary btu-button">Get started</button>
+      <button slot="actions" class="btu-button btu-button-primary">Get started</button>
     </btu-empty-state>
   \`,
   parameters: {
@@ -190,7 +190,7 @@ import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as m}from"./if-defined-
   render: () => html\`
     <btu-empty-state heading="No images uploaded" description="Upload images to see them displayed here." size="md">
       <img slot="graphic" src="cloud-illustration.svg" alt="Cloud graphic" />
-      <button slot="actions" class="btu-button-primary btu-button">Upload image</button>
+      <button slot="actions" class="btu-button btu-button-primary">Upload image</button>
     </btu-empty-state>
   \`,
   parameters: {
@@ -230,7 +230,7 @@ import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as m}from"./if-defined-
         <div style="width: 240px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
           <btu-empty-state heading="No results" description="Try a different query." size="sm">
             \${responsiveGraphic}
-            <button slot="actions" class="btu-button-gray btu-button-sm btu-button">Clear</button>
+            <button slot="actions" class="btu-button btu-button-gray btu-button-sm">Clear</button>
           </btu-empty-state>
         </div>
         <div style="width: 360px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
@@ -240,7 +240,7 @@ import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as m}from"./if-defined-
             size="md"
           >
             \${responsiveGraphic}
-            <button slot="actions" class="btu-button-primary btu-button">Upload image</button>
+            <button slot="actions" class="btu-button btu-button-primary">Upload image</button>
           </btu-empty-state>
         </div>
         <div style="width: 520px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
@@ -250,7 +250,7 @@ import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as m}from"./if-defined-
             size="lg"
           >
             \${responsiveGraphic}
-            <button slot="actions" class="btu-button-primary btu-button">Get started</button>
+            <button slot="actions" class="btu-button btu-button-primary">Get started</button>
           </btu-empty-state>
         </div>
       </div>
@@ -305,7 +305,7 @@ import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as m}from"./if-defined-
         emphasize="pulse"
         style="color: oklch(var(--btu-theme-gray-500))"
       ></btu-icon>
-      <button slot="actions" class="btu-button-success btu-button-sm btu-button">Add item</button>
+      <button slot="actions" class="btu-button btu-button-success btu-button-sm">Add item</button>
     </btu-empty-state>
   \`,
   parameters: {

package/dist/storybook/assets/{Events.stories-SjSVTFwA.js → Events.stories-B0tluV0t.js}

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

package/dist/storybook/assets/{Heading.stories-F7pp5AO4.js → Heading.stories-6CzGqAAc.js}

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

package/dist/storybook/assets/{HueRipple.stories-Dt-QniLc.js → HueRipple.stories-DaQiDn9K.js}

@@ -1,4 +1,4 @@
-import{x as i}from"./iframe-C3TUQi31.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-TUtCVpwY.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Hue Ripple",tags:["autodocs"],parameters:{docs:{subtitle:"Click anywhere to send a hue-shifting ripple across the viewport",description:{component:`
+import{x as i}from"./iframe-CufEXQ5F.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-YTBnP55L.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Hue Ripple",tags:["autodocs"],parameters:{docs:{subtitle:"Click anywhere to send a hue-shifting ripple across the viewport",description:{component:`
 Uses the **View Transition API** to create an expanding ring that reveals OKLCH-shifted colors as it sweeps past each element, then they return to normal.
 
 ### Usage

package/dist/storybook/assets/{Icon.stories-Cxknci9d.js → Icon.stories-CFkYO_7w.js}

@@ -1,4 +1,4 @@
-import{g,x as s}from"./iframe-C3TUQi31.js";import{o as h}from"./style-map-ADugLljH.js";import{L as u}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:x,args:v,argTypes:i}=g("btu-icon"),b=["xs","sm","md","lg","xl"],f=["ai","error","gray","primary","purple","rose","success","teal","warning"],C={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"An icon component using Lucide icons with built-in support for custom colors and sizes.",description:{component:`
+import{g,x as s}from"./iframe-CufEXQ5F.js";import{o as h}from"./style-map-BkaK9546.js";import{L as u}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:x,args:v,argTypes:i}=g("btu-icon"),b=["xs","sm","md","lg","xl"],f=["ai","error","gray","primary","purple","rose","success","teal","warning"],C={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"An icon component using Lucide icons with built-in support for custom colors and sizes.",description:{component:`
 <strong>When to use:</strong>
 <ul>
   <li>To visually reinforce actions, states, or categories</li>
@@ -95,7 +95,7 @@ import{g,x as s}from"./iframe-C3TUQi31.js";import{o as h}from"./style-map-ADugLl
 
       <div class="flex items-center gap-2">
         <strong>Unlabeled icon button (A11y concern!):</strong>
-        <button class="btu-button-error btu-button-fill-none btu-button-sm btu-button">
+        <button class="btu-button btu-button-fill-none btu-button-error btu-button-sm">
           <btu-icon symbol="trash-2" size="md" class="text-gray-900"></btu-icon>
         </button>
       </div>
@@ -103,7 +103,7 @@ import{g,x as s}from"./iframe-C3TUQi31.js";import{o as h}from"./style-map-ADugLl
       <div class="flex items-center gap-2">
         <strong>Labeled via <code>aria-label</code> and <code>title</code>:</strong>
         <button
-          class="btu-button-primary btu-button-sm btu-button"
+          class="btu-button btu-button-primary btu-button-sm"
           aria-label="Favorite this item"
           title="Favorite this item"
         >
@@ -113,7 +113,7 @@ import{g,x as s}from"./iframe-C3TUQi31.js";import{o as h}from"./style-map-ADugLl
 
       <div class="flex items-center gap-2">
         <strong>Labeled via accompanying text:</strong>
-        <button class="btu-button-primary btu-button-fill-none btu-button-sm btu-button">
+        <button class="btu-button btu-button-fill-none btu-button-primary btu-button-sm">
           <btu-icon symbol="heart" size="md"></btu-icon>
           <span class="ml-1">Favorite</span>
         </button>
@@ -276,7 +276,7 @@ import{g,x as s}from"./iframe-C3TUQi31.js";import{o as h}from"./style-map-ADugLl
 
       <div class="flex items-center gap-2">
         <strong>Unlabeled icon button (A11y concern!):</strong>
-        <button class="btu-button-error btu-button-fill-none btu-button-sm btu-button">
+        <button class="btu-button btu-button-fill-none btu-button-error btu-button-sm">
           <btu-icon symbol="trash-2" size="md" class="text-gray-900"></btu-icon>
         </button>
       </div>
@@ -284,7 +284,7 @@ import{g,x as s}from"./iframe-C3TUQi31.js";import{o as h}from"./style-map-ADugLl
       <div class="flex items-center gap-2">
         <strong>Labeled via <code>aria-label</code> and <code>title</code>:</strong>
         <button
-          class="btu-button-primary btu-button-sm btu-button"
+          class="btu-button btu-button-primary btu-button-sm"
           aria-label="Favorite this item"
           title="Favorite this item"
         >
@@ -294,7 +294,7 @@ import{g,x as s}from"./iframe-C3TUQi31.js";import{o as h}from"./style-map-ADugLl
 
       <div class="flex items-center gap-2">
         <strong>Labeled via accompanying text:</strong>
-        <button class="btu-button-primary btu-button-fill-none btu-button-sm btu-button">
+        <button class="btu-button btu-button-fill-none btu-button-primary btu-button-sm">
           <btu-icon symbol="heart" size="md"></btu-icon>
           <span class="ml-1">Favorite</span>
         </button>

package/dist/storybook/assets/{IconButton.stories-C7nbDmmd.js → IconButton.stories-DwBTqvTi.js}

@@ -1,4 +1,4 @@
-import{g as p,x as e}from"./iframe-C3TUQi31.js";import{o as b}from"./if-defined-BkzXcv-a.js";import{L as d}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:y,argTypes:o}=p("btu-icon-button"),x={title:"Components/Icon Button",component:"btu-icon-button",tags:["autodocs"],parameters:{docs:{subtitle:"Combines button styles with the icon component along with an opinionated API",description:{component:`
+import{g as p,x as e}from"./iframe-CufEXQ5F.js";import{o as b}from"./if-defined-f_e-RnGa.js";import{L as d}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:y,argTypes:o}=p("btu-icon-button"),x={title:"Components/Icon Button",component:"btu-icon-button",tags:["autodocs"],parameters:{docs:{subtitle:"Combines button styles with the icon component along with an opinionated API",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>For actions in compact or space-constrained interfaces (toolbars, tables, cards)</li>

package/dist/storybook/assets/{LinearProgress.stories-DgP2rsiS.js → LinearProgress.stories-Coxmgjmo.js}

@@ -1,4 +1,4 @@
-import{g as D,E as h,x as T}from"./iframe-C3TUQi31.js";import{o as A}from"./style-map-ADugLljH.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:`
+import{g as D,E as h,x as T}from"./iframe-CufEXQ5F.js";import{o as A}from"./style-map-BkaK9546.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>

package/dist/storybook/assets/{Pagination.stories-DbLKeykx.js → Pagination.stories-CYrKX5iI.js}

@@ -1,4 +1,4 @@
-import{g as m,x as u}from"./iframe-C3TUQi31.js";import{o as g}from"./style-map-ADugLljH.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-CufEXQ5F.js";import{o as g}from"./style-map-BkaK9546.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>
@@ -62,7 +62,7 @@ import{g as m,x as u}from"./iframe-C3TUQi31.js";import{o as g}from"./style-map-A
       </btu-dropdown>
       <button
         slot="jumper"
-        class="btu-button-sm btu-button"
+        class="btu-button btu-button-sm"
         @click=${t=>{const n=t.target.closest("btu-pagination");n&&(n.page=1)}}
       >
         Today
@@ -162,7 +162,7 @@ import{g as m,x as u}from"./iframe-C3TUQi31.js";import{o as g}from"./style-map-A
       </btu-dropdown>
       <button
         slot="jumper"
-        class="btu-button-sm btu-button"
+        class="btu-button btu-button-sm"
         @click=\${(e: Event) => {
     const pagination = (e.target as HTMLElement).closest('btu-pagination');
     if (pagination) pagination.page = 1;

package/dist/storybook/assets/{Popover.stories-CbmWs7x-.js → Popover.stories-BkGiUOfu.js}

@@ -1,4 +1,4 @@
-import{g as p,x as l}from"./iframe-C3TUQi31.js";import{o as a}from"./if-defined-BkzXcv-a.js";import{o as c}from"./style-map-ADugLljH.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:`
+import{g as p,x as l}from"./iframe-CufEXQ5F.js";import{o as a}from"./if-defined-f_e-RnGa.js";import{o as c}from"./style-map-BkaK9546.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>
@@ -35,7 +35,7 @@ import{g as p,x as l}from"./iframe-C3TUQi31.js";import{o as a}from"./if-defined-
             ?no-arrow="${o.noArrow}"
             ?open="${o.open}"
           >
-            <button class="btu-button-gray btu-button-sm btu-button" slot="trigger">
+            <button class="btu-button btu-button-gray btu-button-sm" slot="trigger">
               ${o.trigger==="hover"?"Hover me":o.trigger==="focus"?"Focus me":"Click me"}
             </button>
             <div slot="content">
@@ -51,19 +51,19 @@ import{g as p,x as l}from"./iframe-C3TUQi31.js";import{o as a}from"./if-defined-
     `}},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="btu-button-primary btu-button-sm btu-button" slot="trigger">Top</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Top</button>
         <div slot="content">Popover positioned above the trigger</div>
       </btu-popover>
       <btu-popover position="bottom">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Bottom</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Bottom</button>
         <div slot="content">Popover positioned below the trigger</div>
       </btu-popover>
       <btu-popover position="left">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Left</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Left</button>
         <div slot="content">Popover positioned left of the trigger</div>
       </btu-popover>
       <btu-popover position="right">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Right</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Right</button>
         <div slot="content">Popover positioned right of the trigger</div>
       </btu-popover>
     </div>
@@ -118,20 +118,20 @@ import{g as p,x as l}from"./iframe-C3TUQi31.js";import{o as a}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-error btu-button" slot="trigger">Delete item</button>
+        <button class="btu-button btu-button-error" 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-warning btu-button-xs btu-button">Cancel</button>
-              <button class="btu-button-error btu-button-xs btu-button-fill-none btu-button">Delete</button>
+              <button class="btu-button btu-button-warning btu-button-xs">Cancel</button>
+              <button class="btu-button btu-button-fill-none btu-button-error btu-button-xs">Delete</button>
             </div>
           </div>
         </div>
       </btu-popover>
       <btu-popover trigger="hover" delay="200" position="bottom">
-        <button class="btu-button-primary btu-button" slot="trigger">Hover for chart data</button>
+        <button class="btu-button btu-button-primary" 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;"
@@ -210,19 +210,19 @@ import{g as p,x as l}from"./iframe-C3TUQi31.js";import{o as a}from"./if-defined-
   render: () => html\`
     <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
       <btu-popover position="top">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Top</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Top</button>
         <div slot="content">Popover positioned above the trigger</div>
       </btu-popover>
       <btu-popover position="bottom">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Bottom</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Bottom</button>
         <div slot="content">Popover positioned below the trigger</div>
       </btu-popover>
       <btu-popover position="left">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Left</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Left</button>
         <div slot="content">Popover positioned left of the trigger</div>
       </btu-popover>
       <btu-popover position="right">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Right</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Right</button>
         <div slot="content">Popover positioned right of the trigger</div>
       </btu-popover>
     </div>
@@ -286,20 +286,20 @@ import{g as p,x as l}from"./iframe-C3TUQi31.js";import{o as a}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-error btu-button" slot="trigger">Delete item</button>
+        <button class="btu-button btu-button-error" 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-warning btu-button-xs btu-button">Cancel</button>
-              <button class="btu-button-error btu-button-xs btu-button-fill-none btu-button">Delete</button>
+              <button class="btu-button btu-button-warning btu-button-xs">Cancel</button>
+              <button class="btu-button btu-button-fill-none btu-button-error btu-button-xs">Delete</button>
             </div>
           </div>
         </div>
       </btu-popover>
       <btu-popover trigger="hover" delay="200" position="bottom">
-        <button class="btu-button-primary btu-button" slot="trigger">Hover for chart data</button>
+        <button class="btu-button btu-button-primary" 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;"

package/dist/storybook/assets/{ReadyMixin-BSMJuM5x.js → ReadyMixin-CP6tQ4FB.js}

@@ -1 +1 @@
-import"./iframe-C3TUQi31.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};
+import"./iframe-CufEXQ5F.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-DPojZp67.js → RovingTabindexMixin.stories-CzkPw8Nl.js}

@@ -1,4 +1,4 @@
-import{x as l,i as v}from"./iframe-C3TUQi31.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-CufEXQ5F.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-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>
+        <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>
       </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-BF7lM0fa.js → Rtc.stories-CVch488H.js}

@@ -1,4 +1,4 @@
-import{x as o}from"./iframe-C3TUQi31.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-CufEXQ5F.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-DwVglPfj.js → ScrollShadow.stories-BGh-Irt7.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-C3TUQi31.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-CufEXQ5F.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/{Switch.stories-DjjlIvXU.js → Switch.stories-DPfP0QVK.js}

@@ -1,4 +1,4 @@
-import{g as k,x as c}from"./iframe-C3TUQi31.js";import{o as s}from"./if-defined-BkzXcv-a.js";import{o as f}from"./style-map-ADugLljH.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-CufEXQ5F.js";import{o as s}from"./if-defined-f_e-RnGa.js";import{o as f}from"./style-map-BkaK9546.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>
@@ -71,7 +71,7 @@ import{g as k,x as c}from"./iframe-C3TUQi31.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-sm btu-button w-fit">Submit</button>
+          <button type="submit" class="btu-button btu-button-sm w-fit">Submit</button>
           <pre class="form-output text-xs text-gray-600"></pre>
         </form>
       </div>
@@ -90,7 +90,7 @@ import{g as k,x as c}from"./iframe-C3TUQi31.js";import{o as s}from"./if-defined-
         <div class="flex items-center gap-4">
           <btu-switch id="programmatic-switch" label="Controlled switch" size="md"></btu-switch>
           <button
-            class="btu-button-sm btu-button"
+            class="btu-button btu-button-sm"
             @click=${()=>{const e=document.getElementById("programmatic-switch");e&&(e.checked=!e.checked)}}
           >
             Toggle externally
@@ -264,7 +264,7 @@ import{g as k,x as c}from"./iframe-C3TUQi31.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-sm btu-button w-fit">Submit</button>
+          <button type="submit" class="btu-button btu-button-sm w-fit">Submit</button>
           <pre class="form-output text-xs text-gray-600"></pre>
         </form>
       </div>
@@ -283,7 +283,7 @@ import{g as k,x as c}from"./iframe-C3TUQi31.js";import{o as s}from"./if-defined-
         <div class="flex items-center gap-4">
           <btu-switch id="programmatic-switch" label="Controlled switch" size="md"></btu-switch>
           <button
-            class="btu-button-sm btu-button"
+            class="btu-button btu-button-sm"
             @click=\${() => {
     const sw = document.getElementById('programmatic-switch') as HTMLElement & {
       checked: boolean;

package/dist/storybook/assets/{Tab.stories-zUdDTEwX.js → Tab.stories-CBcuRcDB.js}

@@ -1,4 +1,4 @@
-import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as d}from"./style-map-ADugLljH.js";import"./preload-helper-PPVm8Dsz.js";const{events:c,args:m,argTypes:t}=u("btu-tab"),y={title:"Components/Tabs/Tab",component:"btu-tab",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tab",description:{component:`
+import{g as u,x as e}from"./iframe-CufEXQ5F.js";import{o as d}from"./style-map-BkaK9546.js";import"./preload-helper-PPVm8Dsz.js";const{events:c,args:m,argTypes:t}=u("btu-tab"),y={title:"Components/Tabs/Tab",component:"btu-tab",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tab",description:{component:`
 An individual tab within a \`btu-tabs\` group.
 
 Renders a button with \`role="tab"\` that participates in keyboard navigation and selection state managed by the parent \`btu-tabs\` container.

package/dist/storybook/assets/{Tabs.stories-yWCAVVnG.js → Tabs.stories-CDOBjYbs.js}

@@ -1,4 +1,4 @@
-import{g as b,E as i,x as s}from"./iframe-C3TUQi31.js";import{o as c}from"./style-map-ADugLljH.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:u,argTypes:a}=b("btu-tabs"),h={title:"Components/Tabs",component:"btu-tabs",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tabs",description:{component:`
+import{g as b,E as i,x as s}from"./iframe-CufEXQ5F.js";import{o as c}from"./style-map-BkaK9546.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:u,argTypes:a}=b("btu-tabs"),h={title:"Components/Tabs",component:"btu-tabs",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tabs",description:{component:`
 A tab group component that manages selection state across a set of \`btu-tab\` children.
 
 <h3>When to use:</h3>

package/dist/storybook/assets/{Throttle.stories-BrcbOwZL.js → Throttle.stories-Bqyul0aW.js}

@@ -1,4 +1,4 @@
-import{x as u}from"./iframe-C3TUQi31.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 m=document.getElementById(`${t}-normal-count`),h=document.getElementById(`${t}-throttled-count`);m&&(m.textContent=String(n)),h&&(h.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),a=()=>{n++,r()},l=()=>{a(),s()};return u`
+import{x as u}from"./iframe-CufEXQ5F.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 m=document.getElementById(`${t}-normal-count`),h=document.getElementById(`${t}-throttled-count`);m&&(m.textContent=String(n)),h&&(h.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">
@@ -25,7 +25,7 @@ import{x as u}from"./iframe-C3TUQi31.js";import"./preload-helper-PPVm8Dsz.js";fu
 
         <button
           @click=${()=>{n=0,o=0,r()}}
-          class="btu-button-gray btu-button-sm btu-button"
+          class="btu-button btu-button-gray btu-button-sm"
         >
           Reset Counters
         </button>
@@ -58,7 +58,7 @@ import{x as u}from"./iframe-C3TUQi31.js";import"./preload-helper-PPVm8Dsz.js";fu
 
         <button
           @click=${()=>{t=0,n=0,o()}}
-          class="btu-button-gray btu-button-sm btu-button"
+          class="btu-button btu-button-gray btu-button-sm"
         >
           Reset Counters
         </button>
@@ -163,7 +163,7 @@ window.addEventListener('scroll', handleScroll)</code></pre>
       throttledCount = 0;
       updateCounts();
     }}
-          class="btu-button-gray btu-button-sm btu-button"
+          class="btu-button btu-button-gray btu-button-sm"
         >
           Reset Counters
         </button>
@@ -231,7 +231,7 @@ window.addEventListener('scroll', handleScroll)</code></pre>
       throttledScrollCount = 0;
       updateScrollCounts();
     }}
-          class="btu-button-gray btu-button-sm btu-button"
+          class="btu-button btu-button-gray btu-button-sm"
         >
           Reset Counters
         </button>