@brightspot/ui 5.0.4-pre.20260624 → 5.2.0

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

@@ -1,4 +1,4 @@
-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:`
+import{g as S,x as t}from"./iframe-DNJdsh5L.js";import{o as f}from"./style-map-BZ07XihX.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.
 

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

@@ -1,4 +1,4 @@
-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:`
+import{g as u,x as e}from"./iframe-DNJdsh5L.js";import{o as m}from"./if-defined-CM2lJk-0.js";import{o as h}from"./style-map-BZ07XihX.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>

package/dist/storybook/assets/EscaAvatar.stories-DnriDX7_.js

@@ -0,0 +1,138 @@
+import{g as f,x as a}from"./iframe-DNJdsh5L.js";import{o as x}from"./style-map-BZ07XihX.js";import"./preload-helper-PPVm8Dsz.js";const{events:w,args:z,argTypes:m}=f("btu-esca-avatar"),y=["idle","wave","search","complete"],g=["xs","sm","md","lg","xl"],$={title:"Components/Esca/Avatar",component:"btu-esca-avatar",tags:["autodocs"],parameters:{docs:{subtitle:"The animated avatar for the Esca AI assistant",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>Alongside the Esca assistant's messages, in any chat surface</li>
+  <li>To signal what the assistant is doing: greeting, thinking, or done</li>
+</ul>
+
+<h3>States:</h3>
+<ul>
+  <li><strong>idle:</strong> a still frame of the wave — the resting state</li>
+  <li><strong>wave:</strong> plays once on open, then holds the last frame</li>
+  <li><strong>search:</strong> loops while the assistant generates a response</li>
+  <li><strong>complete:</strong> plays once when the response finishes, then holds</li>
+</ul>
+
+<p>Drive it through the single <code>state</code> attribute. Reduced-motion users get a static frame instead of playback.</p>
+
+<h3>Accessibility:</h3>
+<ul>
+  <li>The avatar is a visual indicator, not a status channel. By default it exposes a static name (<code>role="img"</code>, <code>aria-label="Esca"</code>), set only when absent so you can override them.</li>
+  <li>When the assistant is already named in the surrounding UI (the common case in a chat), treat the avatar as decorative — set <code>aria-hidden="true"</code> to avoid a redundant announcement.</li>
+  <li>Don't convey activity (thinking / done) by changing this element's ARIA per <code>state</code> — a looping <code>search</code> would announce repeatedly. Surface status as text in a polite <code>aria-live</code> region owned by the chat UI. The component intentionally does not announce its own state.</li>
+</ul>
+        `}},actions:{handles:w},controls:{expanded:!0}},args:{...z,state:"wave",size:"md"},argTypes:{...m,"--esca-avatar-size":{table:{disable:!0}},state:{...m.state,control:{type:"select"},options:y,description:"Animation to play. Changing this swaps the animation.",table:{category:"Attributes",defaultValue:{summary:"idle"}}},size:{...m.size,control:{type:"select"},options:g,description:"Avatar size scale (mirrors btu-avatar). Overridden by `--esca-avatar-size`.",table:{category:"Attributes",defaultValue:{summary:"md"}}},customSize:{name:"--esca-avatar-size",control:{type:"text"},description:'Width/height override (e.g. "3rem"). Beats the `size` attribute; default box is 2.5rem (md).',table:{category:"css properties"}}},render:e=>{const t={};return e.customSize&&(t["--esca-avatar-size"]=e.customSize),a`<btu-esca-avatar state="${e.state}" size="${e.size}" style=${x(t)}></btu-esca-avatar>`}},n={args:{},parameters:{docs:{description:{story:"Use the controls to switch between states and resize the avatar."}}}},r={render:()=>a`<div class="flex flex-row items-start gap-8">
+      ${y.map(e=>a`
+          <div class="flex flex-col items-center gap-2">
+            <btu-esca-avatar state="${e}" style="--esca-avatar-size: 4rem"></btu-esca-avatar>
+            <span class="text-xs font-medium text-gray-700">${e}</span>
+          </div>
+        `)}
+    </div>`,parameters:{docs:{description:{story:"Every state side by side. `wave`, `search`, and `complete` play on load (`search` loops); `idle` holds a still frame."}}}},o={render:()=>a`<div class="flex flex-row items-center gap-6">
+      ${g.map(e=>a`
+          <div class="flex flex-col items-center gap-2">
+            <btu-esca-avatar state="search" size="${e}"></btu-esca-avatar>
+            <span class="text-xs text-gray-600">${e}</span>
+          </div>
+        `)}
+    </div>`,parameters:{docs:{description:{story:"The `size` scale (`xs`–`xl`), mirroring `<btu-avatar>`. For an arbitrary size, override with the `--esca-avatar-size` custom property."}}}},i={render:()=>{const e=document.createElement("div");e.className="flex flex-col items-start gap-4";const t=document.createElement("btu-esca-avatar");t.style.setProperty("--esca-avatar-size","4rem");const c=document.createElement("span");c.className="text-xs text-gray-600";const s=document.createElement("button");s.textContent="Replay",s.className="btu-button btu-button-gray rounded px-3 py-1 text-sm";let l;const d=p=>{c.textContent=p},u=()=>{clearTimeout(l),t.state="wave",d("state: wave — greeting on open")};t.addEventListener("btu-esca-avatar-complete",()=>{t.state==="wave"&&(t.state="search",d("state: search — generating a response"),l=setTimeout(()=>{t.state="complete",d("state: complete — response finished")},2500))}),s.addEventListener("click",u),e.append(t,c,s),queueMicrotask(u);const h=new MutationObserver(p=>{p.forEach(b=>b.removedNodes.forEach(v=>{(v===e||v.contains(e))&&(clearTimeout(l),h.disconnect())}))});return queueMicrotask(()=>{e.parentNode&&h.observe(e.parentNode,{childList:!0})}),e},parameters:{docs:{description:{story:"The full assistant flow driven by the `state` attribute: `wave` on open, then `search` while responding (advanced by the `btu-esca-avatar-complete` event), then `complete`. Click Replay to run it again."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Use the controls to switch between states and resize the avatar.'
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-row items-start gap-8">
+      \${stateOptions.map(state => html\`
+          <div class="flex flex-col items-center gap-2">
+            <btu-esca-avatar state="\${state}" style="--esca-avatar-size: 4rem"></btu-esca-avatar>
+            <span class="text-xs font-medium text-gray-700">\${state}</span>
+          </div>
+        \`)}
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Every state side by side. \`wave\`, \`search\`, and \`complete\` play on load (\`search\` loops); \`idle\` holds a still frame.'
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-row items-center gap-6">
+      \${sizeOptions.map(size => html\`
+          <div class="flex flex-col items-center gap-2">
+            <btu-esca-avatar state="search" size="\${size}"></btu-esca-avatar>
+            <span class="text-xs text-gray-600">\${size}</span>
+          </div>
+        \`)}
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The \`size\` scale (\`xs\`–\`xl\`), mirroring \`<btu-avatar>\`. For an arbitrary size, override with the \`--esca-avatar-size\` custom property.'
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const container = document.createElement('div');
+    container.className = 'flex flex-col items-start gap-4';
+    const avatar = document.createElement('btu-esca-avatar') as EscaAvatar;
+    avatar.style.setProperty('--esca-avatar-size', '4rem');
+    const status = document.createElement('span');
+    status.className = 'text-xs text-gray-600';
+    const replay = document.createElement('button');
+    replay.textContent = 'Replay';
+    replay.className = 'btu-button btu-button-gray rounded px-3 py-1 text-sm';
+    let searchTimer: ReturnType<typeof setTimeout> | undefined;
+    const setStatus = (text: string) => {
+      status.textContent = text;
+    };
+
+    // Mirrors a real exchange: greet on open, think while responding, then settle on completion.
+    const run = () => {
+      clearTimeout(searchTimer);
+      avatar.state = 'wave';
+      setStatus('state: wave — greeting on open');
+    };
+    avatar.addEventListener('btu-esca-avatar-complete', () => {
+      if (avatar.state === 'wave') {
+        avatar.state = 'search';
+        setStatus('state: search — generating a response');
+        searchTimer = setTimeout(() => {
+          avatar.state = 'complete';
+          setStatus('state: complete — response finished');
+        }, 2500);
+      }
+    });
+    replay.addEventListener('click', run);
+    container.append(avatar, status, replay);
+    queueMicrotask(run);
+
+    // Clear the pending timer when the story unmounts.
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => mutation.removedNodes.forEach(node => {
+        if (node === container || node.contains(container)) {
+          clearTimeout(searchTimer);
+          observer.disconnect();
+        }
+      }));
+    });
+    queueMicrotask(() => {
+      if (container.parentNode) observer.observe(container.parentNode, {
+        childList: true
+      });
+    });
+    return container;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'The full assistant flow driven by the \`state\` attribute: \`wave\` on open, then \`search\` while responding (advanced by the \`btu-esca-avatar-complete\` event), then \`complete\`. Click Replay to run it again.'
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};const k=["Default","States","Sizes","Lifecycle"];export{n as Default,i as Lifecycle,o as Sizes,r as States,k as __namedExportsOrder,$ as default};

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

@@ -1,4 +1,4 @@
-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:`
+import{x as d}from"./iframe-DNJdsh5L.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-6CzGqAAc.js → Heading.stories-CfQHk5pf.js}

@@ -1,3 +1,3 @@
-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:`{
+import{x as s}from"./iframe-DNJdsh5L.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-DaQiDn9K.js → HueRipple.stories-CR75dLBM.js}

@@ -1,4 +1,4 @@
-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:`
+import{x as i}from"./iframe-DNJdsh5L.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-B1_SwzVL.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-CFkYO_7w.js → Icon.stories-BCSRhY2s.js}

@@ -1,4 +1,4 @@
-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:`
+import{g,x as s}from"./iframe-DNJdsh5L.js";import{o as h}from"./style-map-BZ07XihX.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>

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

@@ -1,4 +1,4 @@
-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:`
+import{g as p,x as e}from"./iframe-DNJdsh5L.js";import{o as b}from"./if-defined-CM2lJk-0.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-Coxmgjmo.js → LinearProgress.stories-B7GYC8WE.js}

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

@@ -0,0 +1,300 @@
+import{x as h,i as v}from"./iframe-DNJdsh5L.js";import{o as k}from"./onFind-AbVF4rYD.js";import"./preload-helper-PPVm8Dsz.js";const x=e=>{class n extends e{#t=[];onFindRegistration(){return null}#e(){if(this.#t.length)return;const i=this.onFindRegistration();if(!i)return;const d=Array.isArray(i)?i:[i];this.#t=d.map(c=>k(this,c.selectors,c.callback))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.#e()}firstUpdated(i){super.firstUpdated(i),this.#e()}disconnectedCallback(){super.disconnectedCallback(),this.#t.forEach(i=>i()),this.#t=[]}}return n},{expect:a,userEvent:l,waitFor:r,within:w}=__STORYBOOK_MODULE_TEST__,b="ofm-demo";if(!customElements.get(b)){class e extends x(v){onFindRegistration(){return{selectors:":scope > .ofm-item",callback:t=>t.classList.add("ring-2","ring-success-500")}}render(){return h`<slot></slot>`}}customElements.define(b,e)}const p="ofm-multi";if(!customElements.get(p)){class e extends x(v){onFindRegistration(){return[{selectors:":scope > .ofm-a",callback:t=>t.classList.add("ring-2","ring-success-500")},{selectors:":scope > .ofm-b",callback:t=>t.classList.add("ring-2","ring-primary-500")}]}render(){return h`<slot></slot>`}}customElements.define(p,e)}function g(){return globalThis[Symbol.for("brightspot.onFind")]?.callbacks?.length??0}const M={title:"Mixins/OnFind Mixin",tags:["autodocs"],parameters:{docs:{description:{component:`
+\`OnFindMixin\` registers an \`onFind\` child-redistribution callback and
+**tears it down on disconnect**, so a detached component is garbage-collectable
+and stops being visited on every document mutation.
+
+\`onFind\` is backed by a single global \`MutationObserver\` and a global list of
+callbacks. A component that registers a callback but never removes it keeps
+itself reachable forever and adds permanent per-mutation work. This mixin owns
+that lifecycle so individual components don't have to hand-wire it.
+
+<h3>What OnFindMixin Does</h3>
+<ul>
+    <li>Registers the component's \`onFind\` callback after first render (in \`firstUpdated\`).</li>
+    <li>Disposes the registration in \`disconnectedCallback\` so a removed component can be GC'd.</li>
+    <li>Re-arms the registration on reattach — \`firstUpdated\` only fires once, so \`connectedCallback\` re-registers when \`hasUpdated\` is true.</li>
+    <li>Stays idempotent: arming while already registered is a no-op.</li>
+</ul>
+
+<h3>The Contract</h3>
+<p>A component declares <b>what</b> to register by implementing
+\`onFindRegistration()\`, which returns <code>{ selectors, callback }</code>,
+\`null\` to skip (e.g. when required containers aren't present yet), or an
+<b>array</b> of registrations for several independent sweeps (all disposed
+together on disconnect). It is re-invoked on every registration, so query
+containers <b>inside</b> it rather than capturing them once — a reattach then
+re-binds against the current DOM.</p>
+
+<p>The <code>callback</code> must be <b>idempotent</b>: on reattach the mixin
+re-runs \`onFind\`'s initial sweep, so it may be called again for a child that is
+already placed.</p>
+
+<p>Subclasses that override \`firstUpdated\` <b>must</b> call
+\`super.firstUpdated()\`, or the initial registration never runs.</p>
+
+<h3>Mixin Composition</h3>
+
+<p>Place OnFindMixin near the base, just outside ReadyMixin, so it inherits the
+DOM-ready guarantee:</p>
+
+<p> ✅ Correct
+EventEmitterMixin(OnFindMixin(ReadyMixin(LitElement)))</p>
+
+<h3>Usage</h3>
+ \`\`\`typescript
+  import { OnFindMixin } from './OnFindMixin'
+
+  class Card extends OnFindMixin(ReadyMixin(LitElement)) {
+    firstUpdated(changed) {
+      super.firstUpdated(changed) // arms onFind
+      this.emit('btu-card-ready')
+    }
+
+    onFindRegistration() {
+      return {
+        selectors: ':scope > [slot], :scope > img, :scope > btu-badge, :scope > btu-icon',
+        callback: el => this.redistributeChild(el),
+      }
+    }
+  }
+  \`\`\`
+        `}}}},u={render:()=>{const e=`ofm-${Math.random().toString(36).slice(2,8)}`,n=g();let t=null,i=0;const d=()=>requestAnimationFrame(()=>{const s=document.getElementById(`${e}-count`);s&&(s.textContent=String(g()-n))}),c=()=>{i++;const s=document.createElement("div");return s.className="ofm-item rounded border bg-white p-3 text-sm",s.textContent=`Child ${i}`,s};return h`
+      <div class="space-y-4">
+        <p class="text-base">
+          The element below uses <code>OnFindMixin</code>. <strong>Mount</strong> registers its onFind callback;
+          <strong>Unmount</strong> disposes it (no leak); mounting again re-arms it. Watch the global callback count
+          rise to 1 on mount and fall back to 0 on unmount. <strong>Add child</strong> shows onFind still detecting and
+          highlighting children added at runtime.
+        </p>
+
+        <div class="flex gap-2">
+          <button data-testid="mount" @click=${()=>{const s=document.getElementById(`${e}-stage`);s&&(t||(t=document.createElement(b),t.append(c(),c())),t.isConnected||s.appendChild(t),d())}} class="btu-button btu-button-primary btu-button-sm">Mount</button>
+          <button data-testid="unmount" @click=${()=>{t?.remove(),d()}} class="btu-button btu-button-gray btu-button-sm">
+            Unmount
+          </button>
+          <button data-testid="add-child" @click=${()=>{t?.isConnected&&t.appendChild(c())}} class="btu-button btu-button-gray btu-button-sm">
+            Add child
+          </button>
+        </div>
+
+        <div id="${e}-stage" class="min-h-32 space-y-2 rounded border-2 border-gray-300 bg-gray-50 p-4">
+          <div class="text-sm text-gray-500">Mount the component to see its children detected and highlighted…</div>
+        </div>
+
+        <div>
+          <div class="text-xs text-gray-500">onFind callbacks registered by this demo</div>
+          <div data-testid="count" id="${e}-count" class="text-2xl font-bold text-primary-600">0</div>
+        </div>
+      </div>
+    `},parameters:{docs:{description:{story:'Live demo of the OnFindMixin lifecycle. Mounting registers an onFind callback (count → 1), unmounting disposes it (count → 0, so the detached element is collectable), and mounting again re-arms it. "Add child" shows onFind continuing to detect and highlight children added at runtime.'}}},play:async({canvasElement:e,step:n})=>{const t=w(e);await n("Mount registers a callback",async()=>{await l.click(t.getByTestId("mount")),await r(()=>a(t.getByTestId("count")).toHaveTextContent("1"))}),await n("Unmount disposes it (no leak)",async()=>{await l.click(t.getByTestId("unmount")),await r(()=>a(t.getByTestId("count")).toHaveTextContent("0"))}),await n("Re-mount re-arms it",async()=>{await l.click(t.getByTestId("mount")),await r(()=>a(t.getByTestId("count")).toHaveTextContent("1"))})}},m={render:()=>{const e=`ofm-multi-${Math.random().toString(36).slice(2,8)}`,n=g();let t=null;const i=()=>requestAnimationFrame(()=>{const o=document.getElementById(`${e}-count`);o&&(o.textContent=String(g()-n))}),d=(o,y)=>{const s=document.createElement("div");return s.className=`${o} rounded border bg-white p-3 text-sm`,s.textContent=y,s};return h`
+      <div class="space-y-4">
+        <p class="text-base">
+          This element registers <strong>two</strong> independent onFind sweeps via an array (<code
+            >onFindRegistration</code
+          >
+          returns <code>[A, B]</code>). Mounting registers both (count → 2), unmounting disposes both together (count →
+          0), and each sweep highlights only its own child type.
+        </p>
+
+        <div class="flex gap-2">
+          <button data-testid="multi-mount" @click=${()=>{const o=document.getElementById(`${e}-stage`);o&&(t||(t=document.createElement(p),t.append(d("ofm-a","Sweep A child"),d("ofm-b","Sweep B child"))),t.isConnected||o.appendChild(t),i())}} class="btu-button btu-button-primary btu-button-sm">
+            Mount
+          </button>
+          <button data-testid="multi-unmount" @click=${()=>{t?.remove(),i()}} class="btu-button btu-button-gray btu-button-sm">
+            Unmount
+          </button>
+        </div>
+
+        <div id="${e}-stage" class="min-h-32 space-y-2 rounded border-2 border-gray-300 bg-gray-50 p-4">
+          <div class="text-sm text-gray-500">Mount to see both sweeps register and highlight their children…</div>
+        </div>
+
+        <div>
+          <div class="text-xs text-gray-500">onFind callbacks registered by this demo</div>
+          <div data-testid="multi-count" id="${e}-count" class="text-2xl font-bold text-primary-600">0</div>
+        </div>
+      </div>
+    `},parameters:{docs:{description:{story:"Exercises the array form of onFindRegistration: one element registers two independent sweeps. Mounting registers both callbacks (count → 2), each sweep highlights only its own child type, and unmounting disposes both together (count → 0)."}}},play:async({canvasElement:e,step:n})=>{const t=w(e);await n("Mount registers both sweeps",async()=>{await l.click(t.getByTestId("multi-mount")),await r(()=>a(t.getByTestId("multi-count")).toHaveTextContent("2"))}),await n("Each sweep detects its own children",async()=>{await r(()=>{a(e.querySelector(".ofm-a.ring-2")).toBeTruthy(),a(e.querySelector(".ofm-b.ring-2")).toBeTruthy()})}),await n("Unmount disposes both",async()=>{await l.click(t.getByTestId("multi-unmount")),await r(()=>a(t.getByTestId("multi-count")).toHaveTextContent("0"))}),await n("Re-mount re-arms both",async()=>{await l.click(t.getByTestId("multi-mount")),await r(()=>a(t.getByTestId("multi-count")).toHaveTextContent("2"))})}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const id = \`ofm-\${Math.random().toString(36).slice(2, 8)}\`;
+    const baseline = onFindCallbackCount();
+    let demoEl: HTMLElement | null = null;
+    let childN = 0;
+    const refresh = () => requestAnimationFrame(() => {
+      const el = document.getElementById(\`\${id}-count\`);
+      if (el) el.textContent = String(onFindCallbackCount() - baseline);
+    });
+    const makeChild = () => {
+      childN++;
+      const c = document.createElement('div');
+      c.className = 'ofm-item rounded border bg-white p-3 text-sm';
+      c.textContent = \`Child \${childN}\`;
+      return c;
+    };
+
+    // Mount creates the element on first use, or re-attaches the same detached
+    // instance afterwards — that re-attach is what exercises the mixin's reattach
+    // re-arm path.
+    const mount = () => {
+      const stage = document.getElementById(\`\${id}-stage\`);
+      if (!stage) return;
+      if (!demoEl) {
+        demoEl = document.createElement(DEMO_TAG);
+        demoEl.append(makeChild(), makeChild());
+      }
+      if (!demoEl.isConnected) stage.appendChild(demoEl);
+      refresh();
+    };
+    const unmount = () => {
+      demoEl?.remove();
+      refresh();
+    };
+    const addChild = () => {
+      if (demoEl?.isConnected) demoEl.appendChild(makeChild());
+    };
+    return html\`
+      <div class="space-y-4">
+        <p class="text-base">
+          The element below uses <code>OnFindMixin</code>. <strong>Mount</strong> registers its onFind callback;
+          <strong>Unmount</strong> disposes it (no leak); mounting again re-arms it. Watch the global callback count
+          rise to 1 on mount and fall back to 0 on unmount. <strong>Add child</strong> shows onFind still detecting and
+          highlighting children added at runtime.
+        </p>
+
+        <div class="flex gap-2">
+          <button data-testid="mount" @click=\${mount} class="btu-button btu-button-primary btu-button-sm">Mount</button>
+          <button data-testid="unmount" @click=\${unmount} class="btu-button btu-button-gray btu-button-sm">
+            Unmount
+          </button>
+          <button data-testid="add-child" @click=\${addChild} class="btu-button btu-button-gray btu-button-sm">
+            Add child
+          </button>
+        </div>
+
+        <div id="\${id}-stage" class="min-h-32 space-y-2 rounded border-2 border-gray-300 bg-gray-50 p-4">
+          <div class="text-sm text-gray-500">Mount the component to see its children detected and highlighted…</div>
+        </div>
+
+        <div>
+          <div class="text-xs text-gray-500">onFind callbacks registered by this demo</div>
+          <div data-testid="count" id="\${id}-count" class="text-2xl font-bold text-primary-600">0</div>
+        </div>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Live demo of the OnFindMixin lifecycle. Mounting registers an onFind callback (count → 1), unmounting disposes it (count → 0, so the detached element is collectable), and mounting again re-arms it. "Add child" shows onFind continuing to detect and highlight children added at runtime.'
+      }
+    }
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    await step('Mount registers a callback', async () => {
+      await userEvent.click(canvas.getByTestId('mount'));
+      await waitFor(() => expect(canvas.getByTestId('count')).toHaveTextContent('1'));
+    });
+    await step('Unmount disposes it (no leak)', async () => {
+      await userEvent.click(canvas.getByTestId('unmount'));
+      await waitFor(() => expect(canvas.getByTestId('count')).toHaveTextContent('0'));
+    });
+    await step('Re-mount re-arms it', async () => {
+      await userEvent.click(canvas.getByTestId('mount'));
+      await waitFor(() => expect(canvas.getByTestId('count')).toHaveTextContent('1'));
+    });
+  }
+}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const id = \`ofm-multi-\${Math.random().toString(36).slice(2, 8)}\`;
+    const baseline = onFindCallbackCount();
+    let demoEl: HTMLElement | null = null;
+    const refresh = () => requestAnimationFrame(() => {
+      const el = document.getElementById(\`\${id}-count\`);
+      if (el) el.textContent = String(onFindCallbackCount() - baseline);
+    });
+    const makeChild = (cls: string, label: string) => {
+      const c = document.createElement('div');
+      c.className = \`\${cls} rounded border bg-white p-3 text-sm\`;
+      c.textContent = label;
+      return c;
+    };
+    const mount = () => {
+      const stage = document.getElementById(\`\${id}-stage\`);
+      if (!stage) return;
+      if (!demoEl) {
+        demoEl = document.createElement(MULTI_TAG);
+        demoEl.append(makeChild('ofm-a', 'Sweep A child'), makeChild('ofm-b', 'Sweep B child'));
+      }
+      if (!demoEl.isConnected) stage.appendChild(demoEl);
+      refresh();
+    };
+    const unmount = () => {
+      demoEl?.remove();
+      refresh();
+    };
+    return html\`
+      <div class="space-y-4">
+        <p class="text-base">
+          This element registers <strong>two</strong> independent onFind sweeps via an array (<code
+            >onFindRegistration</code
+          >
+          returns <code>[A, B]</code>). Mounting registers both (count → 2), unmounting disposes both together (count →
+          0), and each sweep highlights only its own child type.
+        </p>
+
+        <div class="flex gap-2">
+          <button data-testid="multi-mount" @click=\${mount} class="btu-button btu-button-primary btu-button-sm">
+            Mount
+          </button>
+          <button data-testid="multi-unmount" @click=\${unmount} class="btu-button btu-button-gray btu-button-sm">
+            Unmount
+          </button>
+        </div>
+
+        <div id="\${id}-stage" class="min-h-32 space-y-2 rounded border-2 border-gray-300 bg-gray-50 p-4">
+          <div class="text-sm text-gray-500">Mount to see both sweeps register and highlight their children…</div>
+        </div>
+
+        <div>
+          <div class="text-xs text-gray-500">onFind callbacks registered by this demo</div>
+          <div data-testid="multi-count" id="\${id}-count" class="text-2xl font-bold text-primary-600">0</div>
+        </div>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Exercises the array form of onFindRegistration: one element registers two independent sweeps. Mounting registers both callbacks (count → 2), each sweep highlights only its own child type, and unmounting disposes both together (count → 0).'
+      }
+    }
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    await step('Mount registers both sweeps', async () => {
+      await userEvent.click(canvas.getByTestId('multi-mount'));
+      await waitFor(() => expect(canvas.getByTestId('multi-count')).toHaveTextContent('2'));
+    });
+    await step('Each sweep detects its own children', async () => {
+      await waitFor(() => {
+        expect(canvasElement.querySelector('.ofm-a.ring-2')).toBeTruthy();
+        expect(canvasElement.querySelector('.ofm-b.ring-2')).toBeTruthy();
+      });
+    });
+    await step('Unmount disposes both', async () => {
+      await userEvent.click(canvas.getByTestId('multi-unmount'));
+      await waitFor(() => expect(canvas.getByTestId('multi-count')).toHaveTextContent('0'));
+    });
+    await step('Re-mount re-arms both', async () => {
+      await userEvent.click(canvas.getByTestId('multi-mount'));
+      await waitFor(() => expect(canvas.getByTestId('multi-count')).toHaveTextContent('2'));
+    });
+  }
+}`,...m.parameters?.docs?.source}}};const T=["Demo","MultipleSweeps"];export{u as Demo,m as MultipleSweeps,T as __namedExportsOrder,M as default};

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

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

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

@@ -1,4 +1,4 @@
-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:`
+import{g as p,x as l}from"./iframe-DNJdsh5L.js";import{o as a}from"./if-defined-CM2lJk-0.js";import{o as c}from"./style-map-BZ07XihX.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>

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

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

@@ -1,4 +1,4 @@
-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:`
+import{x as l,i as v}from"./iframe-DNJdsh5L.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.

package/dist/storybook/assets/{Rtc.stories-CVch488H.js → Rtc.stories-D5Vpw1oP.js}

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

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

@@ -1,4 +1,4 @@
-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:`
+import{g as k,x as c}from"./iframe-DNJdsh5L.js";import{o as s}from"./if-defined-CM2lJk-0.js";import{o as f}from"./style-map-BZ07XihX.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>

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

@@ -1,4 +1,4 @@
-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:`
+import{g as u,x as e}from"./iframe-DNJdsh5L.js";import{o as d}from"./style-map-BZ07XihX.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-CDOBjYbs.js → Tabs.stories-DnPRsSsj.js}

@@ -1,4 +1,4 @@
-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:`
+import{g as b,E as i,x as s}from"./iframe-DNJdsh5L.js";import{o as c}from"./style-map-BZ07XihX.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-Bqyul0aW.js → Throttle.stories-DNwTsNRC.js}

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