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

package/dist/storybook/assets/{Dropdown.stories-DAVkpuM5.js → Dropdown.stories-sCz8_Hkw.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-BqpRijx3.js";import{o as f}from"./style-map-DukvFNCc.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-kBKfr87C.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-BqpRijx3.js";import{o as m}from"./if-defined-0srVwUDm.js";import{o as h}from"./style-map-DukvFNCc.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-BXdHEFJR.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-BqpRijx3.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-B2XJMBD8.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-BqpRijx3.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-BfzsAQYM.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-BqpRijx3.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-DuuAvVjP.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--pcHe1x-.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-BqpRijx3.js";import{o as h}from"./style-map-DukvFNCc.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-dbXfrgH3.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-BqpRijx3.js";import{o as b}from"./if-defined-0srVwUDm.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-CApOBX0x.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-BqpRijx3.js";import{o as A}from"./style-map-DukvFNCc.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-df6ckqw3.js

@@ -0,0 +1,300 @@
+import{x as h,i as v}from"./iframe-BqpRijx3.js";import{o as k}from"./onFind-C_VPLxg8.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-DbLKeykx.js → Pagination.stories-_MiDRipW.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-BqpRijx3.js";import{o as g}from"./style-map-DukvFNCc.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;