@brightspot/ui 5.3.2 → 5.4.1

package/dist/storybook/assets/{Dropdown.stories-BQzwsyHE.js → Dropdown.stories-LYd0-ypG.js}

@@ -1,4 +1,4 @@
-import{g as S,x as t}from"./iframe-DpPeZoRd.js";import{o as f}from"./style-map-WEdc6AkA.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-DUmd7GbF.js";import{o as f}from"./style-map-D_jXmlQ4.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-CrckJlBX.js → EmptyState.stories-DjKyE0h3.js}

@@ -1,4 +1,4 @@
-import{g as u,x as e}from"./iframe-DpPeZoRd.js";import{o as m}from"./if-defined-aps73Iby.js";import{o as h}from"./style-map-WEdc6AkA.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-DUmd7GbF.js";import{o as m}from"./if-defined-DBQP12ek.js";import{o as h}from"./style-map-D_jXmlQ4.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-BikckAep.js → EscaAvatar.stories-D3v91UKv.js}

@@ -1,4 +1,4 @@
-import{g as f,x as a}from"./iframe-DpPeZoRd.js";import{o as x}from"./style-map-WEdc6AkA.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:`
+import{g as f,x as a}from"./iframe-DUmd7GbF.js";import{o as x}from"./style-map-D_jXmlQ4.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>

package/dist/storybook/assets/{Events.stories-DC0XMBhF.js → Events.stories-CTe5eZa6.js}

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-DpPeZoRd.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-DUmd7GbF.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-7YtY0gNK.js → Heading.stories-DKt-wgRB.js}

@@ -1,3 +1,3 @@
-import{x as s}from"./iframe-DpPeZoRd.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-DUmd7GbF.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-hRstwRnF.js → HueRipple.stories-B3SVSdL8.js}

@@ -1,4 +1,4 @@
-import{x as i}from"./iframe-DpPeZoRd.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-D8Sr8A-v.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-DUmd7GbF.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-ffu9dnxC.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-4-2N4UlX.js → Icon.stories-B5tDsd--.js}

@@ -1,4 +1,4 @@
-import{g,x as s}from"./iframe-DpPeZoRd.js";import{o as h}from"./style-map-WEdc6AkA.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-DUmd7GbF.js";import{o as h}from"./style-map-D_jXmlQ4.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-ClpNoAT9.js → IconButton.stories-DOV4zFAP.js}

@@ -1,4 +1,4 @@
-import{g as p,x as e}from"./iframe-DpPeZoRd.js";import{o as b}from"./if-defined-aps73Iby.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-DUmd7GbF.js";import{o as b}from"./if-defined-DBQP12ek.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-BlH24bsJ.js → LinearProgress.stories-ai3UD-xw.js}

@@ -1,4 +1,4 @@
-import{g as D,E as h,x as T}from"./iframe-DpPeZoRd.js";import{o as A}from"./style-map-WEdc6AkA.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-DUmd7GbF.js";import{o as A}from"./style-map-D_jXmlQ4.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/Message.stories-CzqIe49h.js

@@ -0,0 +1,432 @@
+import{g as S,E as v,x as s}from"./iframe-DUmd7GbF.js";import{o as f}from"./if-defined-DBQP12ek.js";import{o as w}from"./style-map-D_jXmlQ4.js";import{L as k}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:x,args:L,argTypes:o}=S("btu-message"),T=["primary","info","warning","error","success"],C=[{variant:"primary",label:"Scheduled maintenance on Saturday",description:"Expect up to 30 minutes of downtime starting at 02:00 UTC."},{variant:"info",label:"New feature released",description:"The redesigned editor is now available for all workspaces."},{variant:"warning",label:"API rate limits were updated",description:"Review your usage dashboard to make sure your integrations are still within limits."},{variant:"success",label:"Billing anomaly resolved",description:"All affected invoices have been corrected — no action needed."}],$=(e,t)=>{e.setAttribute("variant",t.variant),e.setAttribute("label",t.label);const n=e.querySelector(".btu-message-description");n&&(n.textContent=t.description??"")},D={title:"Components/Message",component:"btu-message",tags:["autodocs"],parameters:{docs:{subtitle:"High-visibility messages and persistent status anchored to a page or container",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>Communicate messages or provide feedback that is not tied to the user's current action or task</li>
+  <li>Announce breaking news, site-wide alerts, or system status</li>
+  <li>Show persistent informational, warning, error, or success states</li>
+</ul>
+
+<h3>Structure:</h3>
+<p>Every message has a leading icon and a required label. Slot a <code>&lt;span slot="description"&gt;</code> for supporting text beneath the label, or a <code>&lt;btu-badge slot="badge"&gt;</code> for a leading status tag. Enable <code>dismissible</code> for a close button. Slot CTA buttons or <code>&lt;btu-pagination&gt;</code> into the <code>actions</code> slot — in wide containers they stay pinned on the right; in narrow containers with a description they wrap below.</p>
+
+<h3>Full width:</h3>
+<p>On its own a message is a contained, rounded, bordered card. To pin it full-width to the top of a page (e.g., above the CMS content area), wrap it in a <code>&lt;btu-banner&gt;</code> — that strips the rounding and spans it edge-to-edge. See the <a href="?path=/docs/components-banner--docs">Banner</a> component.</p>
+
+<h3>Accessibility:</h3>
+<ul>
+  <li><code>role</code>/<code>aria-live</code>: <code>alert</code>/<code>assertive</code> for <code>error</code> and <code>primary</code>; <code>status</code>/<code>polite</code> for others. <code>aria-atomic="true"</code> is always set</li>
+  <li>The leading icon is decorative (<code>aria-hidden</code>); the dismiss button carries an explicit <code>aria-label</code></li>
+</ul>
+        `}},actions:{handles:x},controls:{expanded:!0}},args:{...L,variant:"primary",label:"Lorem ipsum dolor sit amet consectetur adipisicing elit.",symbol:"",dismissible:!1,"badge-slot":"","description-slot":""},argTypes:{...o,"--message-color-background":{table:{disable:!0}},"--message-color-foreground":{table:{disable:!0}},"--message-color-border":{table:{disable:!0}},"--message-padding":{table:{disable:!0}},"--message-border-radius":{table:{disable:!0}},"actions-slot":{table:{disable:!0}},variant:{...o.variant,control:{type:"select"},options:T},label:{...o.label,control:{type:"text"}},symbol:{...o.symbol,control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name. Only icons available in Lucide v'+k+' are supported. When empty, the message picks a sensible default based on the variant (e.g., "triangle-alert" for warning).'},dismissible:{...o.dismissible,control:{type:"boolean"}},customBackground:{name:"--message-color-background",control:{type:"color"},description:"Override the background color.",table:{category:"CSS Properties"}},customForeground:{name:"--message-color-foreground",control:{type:"color"},description:"Override the text and icon color.",table:{category:"CSS Properties"}},customBorderColor:{name:"--message-color-border",control:{type:"color"},description:"Override the border color (defaults to the variant's 300 shade).",table:{category:"CSS Properties"}},customPadding:{name:"--message-padding",control:{type:"text"},description:"Override the internal padding (default: 1rem).",table:{category:"CSS Properties"}},customBorderRadius:{name:"--message-border-radius",control:{type:"text"},description:"Override the corner rounding (default: 8px).",table:{category:"CSS Properties"}}},render:e=>{const t={};return e.customBackground&&(t["--message-color-background"]=e.customBackground),e.customForeground&&(t["--message-color-foreground"]=e.customForeground),e.customBorderColor&&(t["--message-color-border"]=e.customBorderColor),e.customPadding&&(t["--message-padding"]=e.customPadding),e.customBorderRadius&&(t["--message-border-radius"]=e.customBorderRadius),s`
+      <btu-message
+        variant="${e.variant}"
+        label=${f(e.label||void 0)}
+        symbol=${f(e.symbol||void 0)}
+        ?dismissible="${e.dismissible}"
+        style=${w(t)}
+      >
+        ${e["badge-slot"]?s`<btu-badge slot="badge" variant="${e.variant}" size="sm">${e["badge-slot"]}</btu-badge>`:v}
+        ${e["description-slot"]?s`<span slot="description">${e["description-slot"]}</span>`:v}
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Learn more
+        </button>
+      </btu-message>
+    `}},i={parameters:{docs:{description:{story:"The interactive playground. A sample `actions` button is always rendered for illustration (the `actions` slot takes elements, so it has no text control); use the other controls to explore variant, label, icon, badge, description, and dismissibility."}}}},l={render:()=>s`
+    <div class="flex flex-col gap-3">
+      <btu-message variant="primary" label="Lorem ipsum dolor sit amet consectetur adipisicing elit.">
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Learn more
+        </button>
+      </btu-message>
+      <btu-message variant="info" label="Lorem ipsum dolor sit amet consectetur adipisicing elit.">
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Learn more
+        </button>
+      </btu-message>
+      <btu-message variant="warning" label="Lorem ipsum dolor sit amet consectetur adipisicing elit.">
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Learn more
+        </button>
+      </btu-message>
+      <btu-message variant="error" label="Lorem ipsum dolor sit amet consectetur adipisicing elit.">
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Learn more
+        </button>
+      </btu-message>
+      <btu-message variant="success" label="Lorem ipsum dolor sit amet consectetur adipisicing elit.">
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Learn more
+        </button>
+      </btu-message>
+    </div>
+  `,parameters:{controls:{disable:!0},docs:{description:{story:"All five variants stacked. `primary` uses the primary color for emphasis. The remaining variants use tinted backgrounds that match their semantic color."}}}},u={render:()=>s`
+      <btu-message
+        variant="info"
+        label="Lorem ipsum dolor sit amet consectetur adipisicing elit."
+        dismissible
+        @btu-message-dismiss=${t=>{const a=t.currentTarget.parentElement?.querySelector("[data-replay]");a&&(a.hidden=!1)}}
+      ></btu-message>
+    `,decorators:[e=>{const t=n=>{const a=n.currentTarget,r=a.parentElement?.querySelector("btu-message");r&&(r.hidden=!1),a.hidden=!0};return s`
+        <div class="flex flex-col gap-3">
+          ${e()}
+          <button
+            type="button"
+            data-replay
+            hidden
+            class="btu-button btu-button-fill-none btu-button-gray btu-button-sm self-start"
+            @click=${t}
+          >
+            <btu-icon symbol="rotate-ccw" size="sm"></btu-icon>
+            Replay demo
+          </button>
+        </div>
+      `}],parameters:{controls:{disable:!0},docs:{description:{story:"Setting `dismissible` adds a close button that emits `btu-message-dismiss` and hides the message (sets `hidden`). The event is cancelable — call `event.preventDefault()` in your listener to override the auto-hide and manage visibility yourself (e.g., to animate out or persist the dismissed state). Click **Replay demo** to restore the message."},source:{code:`<btu-message
+  variant="info"
+  label="Lorem ipsum dolor sit amet consectetur adipisicing elit."
+  dismissible
+></btu-message>`}}}},c={render:()=>{const e=[...C],t=a=>{const r=a,h=a.currentTarget.closest("btu-message"),y=e[r.detail.page-1];h&&y&&$(h,y)},n=e[0];return s`
+      <btu-message variant="${n.variant}" label="${n.label}">
+        <span slot="description">${n.description??""}</span>
+        <btu-pagination
+          slot="actions"
+          total-items="${e.length}"
+          page-size="1"
+          page-size-options="1"
+          hide-total-count
+          .pageSizeChanger=${!1}
+          .boundaryButtons=${!1}
+          @btu-pagination-change=${t}
+        ></btu-pagination>
+      </btu-message>
+    `},parameters:{controls:{disable:!0},docs:{description:{story:"The message has no built-in pagination — slot a `<btu-pagination>` into the `actions` slot and react to its `btu-pagination-change` event to swap message content. This demo cycles through 4 messages."}}}},d={render:()=>s`
+    <div class="flex flex-col gap-3">
+      <btu-message variant="primary" label="Scheduled maintenance">
+        <btu-badge slot="badge" variant="primary" size="sm" dot>Live</btu-badge>
+        <span slot="description">A status dot keeps the badge concise for ongoing states.</span>
+      </btu-message>
+      <btu-message variant="success" label="Deploy succeeded">
+        <btu-badge slot="badge" variant="success" size="sm">
+          <btu-icon symbol="check" size="xs"></btu-icon>
+          v3.1.0
+        </btu-badge>
+        <span slot="description">Slot a Lucide icon inside the badge for richer composition.</span>
+      </btu-message>
+      <btu-message variant="warning" label="Beta feature">
+        <btu-badge slot="badge" variant="primary" size="sm">Beta</btu-badge>
+        <span slot="description"
+          >The badge variant is independent — pair a primary "Beta" tag with a warning message.</span
+        >
+      </btu-message>
+    </div>
+  `,parameters:{controls:{disable:!0},docs:{description:{story:"The `badge` slot accepts a full `<btu-badge>`, so consumers control its `variant`, `size`, `dot` affordance, and inner content (e.g., an icon). The badge variant does not have to match the message variant — choose what reads best for the content."}}}},b={render:()=>s`
+    <btu-message variant="warning" label="API rate limits were updated">
+      <span slot="description">
+        Review your <a href="#" class="underline">usage dashboard</a> to make sure your integrations stay within the new
+        limits. <strong>Existing keys keep working through May&nbsp;31</strong>; after that, requests above the cap will
+        return <code>429 Too Many Requests</code>.
+      </span>
+      <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+        Open dashboard
+        <btu-icon symbol="arrow-right" size="sm"></btu-icon>
+      </button>
+    </btu-message>
+  `,parameters:{controls:{disable:!0},docs:{description:{story:"Because `description` is a slot rather than an attribute, you can include rich inline content — links, `<strong>`, `<code>`, or any other markup — directly in the description text."}}}},m={args:{variant:"info",symbol:"megaphone",label:"Maintenance window scheduled for Saturday."},parameters:{docs:{description:{story:"Override the default icon per variant by passing any [Lucide](https://lucide.dev/icons/) icon name via the `symbol` attribute."}}}},p={render:()=>s`
+    <div class="flex flex-col gap-3">
+      <btu-message variant="primary" label="Scheduled maintenance on Saturday.">
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Learn more
+        </button>
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          View changes
+          <btu-icon symbol="arrow-right" size="sm"></btu-icon>
+        </button>
+      </btu-message>
+      <btu-message variant="warning" label="API rate limits were updated">
+        <span slot="description"
+          >Review your usage dashboard to make sure your integrations are still within limits.</span
+        >
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Open dashboard
+          <btu-icon symbol="arrow-right" size="sm"></btu-icon>
+        </button>
+      </btu-message>
+    </div>
+  `,parameters:{controls:{disable:!0},docs:{description:{story:"Slot CTA buttons into the `actions` slot — they pin to the trailing edge and wrap below the text in narrow containers. For cycling paginated content, see the Paginated story."}}}},g={render:()=>s`
+    <btu-message
+      variant="info"
+      label="Custom styled message"
+      style=${w({"--message-color-background":"oklch(0.25 0.05 260)","--message-color-foreground":"oklch(0.95 0.02 260)","--message-border-radius":"0.75rem","--message-padding":"1.25rem 1.75rem"})}
+    >
+      <span slot="description">Override theme colors and shape with CSS custom properties.</span>
+    </btu-message>
+  `,parameters:{controls:{disable:!0},docs:{description:{story:"CSS custom properties allow full visual customization. Use the controls panel in the Default story to experiment with `--message-*` properties interactively."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: 'The interactive playground. A sample \`actions\` button is always rendered for illustration (the \`actions\` slot takes elements, so it has no text control); use the other controls to explore variant, label, icon, badge, description, and dismissibility.'
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="flex flex-col gap-3">
+      <btu-message variant="primary" label="Lorem ipsum dolor sit amet consectetur adipisicing elit.">
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Learn more
+        </button>
+      </btu-message>
+      <btu-message variant="info" label="Lorem ipsum dolor sit amet consectetur adipisicing elit.">
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Learn more
+        </button>
+      </btu-message>
+      <btu-message variant="warning" label="Lorem ipsum dolor sit amet consectetur adipisicing elit.">
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Learn more
+        </button>
+      </btu-message>
+      <btu-message variant="error" label="Lorem ipsum dolor sit amet consectetur adipisicing elit.">
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Learn more
+        </button>
+      </btu-message>
+      <btu-message variant="success" label="Lorem ipsum dolor sit amet consectetur adipisicing elit.">
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Learn more
+        </button>
+      </btu-message>
+    </div>
+  \`,
+  parameters: {
+    controls: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: 'All five variants stacked. \`primary\` uses the primary color for emphasis. The remaining variants use tinted backgrounds that match their semantic color.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const onDismiss = (e: Event) => {
+      const message = e.currentTarget as HTMLElement;
+      const replay = message.parentElement?.querySelector<HTMLElement>('[data-replay]');
+      if (replay) replay.hidden = false;
+    };
+    return html\`
+      <btu-message
+        variant="info"
+        label="Lorem ipsum dolor sit amet consectetur adipisicing elit."
+        dismissible
+        @btu-message-dismiss=\${onDismiss}
+      ></btu-message>
+    \`;
+  },
+  decorators: [story => {
+    const onReplay = (e: Event) => {
+      const btn = e.currentTarget as HTMLElement;
+      const message = btn.parentElement?.querySelector<HTMLElement>('btu-message');
+      if (message) message.hidden = false;
+      btn.hidden = true;
+    };
+    return html\`
+        <div class="flex flex-col gap-3">
+          \${story()}
+          <button
+            type="button"
+            data-replay
+            hidden
+            class="btu-button btu-button-fill-none btu-button-gray btu-button-sm self-start"
+            @click=\${onReplay}
+          >
+            <btu-icon symbol="rotate-ccw" size="sm"></btu-icon>
+            Replay demo
+          </button>
+        </div>
+      \`;
+  }],
+  parameters: {
+    controls: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: 'Setting \`dismissible\` adds a close button that emits \`btu-message-dismiss\` and hides the message (sets \`hidden\`). The event is cancelable — call \`event.preventDefault()\` in your listener to override the auto-hide and manage visibility yourself (e.g., to animate out or persist the dismissed state). Click **Replay demo** to restore the message.'
+      },
+      source: {
+        code: \`<btu-message
+  variant="info"
+  label="Lorem ipsum dolor sit amet consectetur adipisicing elit."
+  dismissible
+></btu-message>\`
+      }
+    }
+  }
+}`,...u.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const messages: MessageData[] = [...DEMO_MESSAGES];
+    const onPageChange = (e: Event) => {
+      const ce = e as CustomEvent<{
+        page: number;
+        pageSize: number;
+      }>;
+      const message = (e.currentTarget as HTMLElement).closest<HTMLElement>('btu-message');
+      const msg = messages[ce.detail.page - 1];
+      if (message && msg) applyMessage(message, msg);
+    };
+    const first = messages[0];
+    return html\`
+      <btu-message variant="\${first.variant}" label="\${first.label}">
+        <span slot="description">\${first.description ?? ''}</span>
+        <btu-pagination
+          slot="actions"
+          total-items="\${messages.length}"
+          page-size="1"
+          page-size-options="1"
+          hide-total-count
+          .pageSizeChanger=\${false}
+          .boundaryButtons=\${false}
+          @btu-pagination-change=\${onPageChange}
+        ></btu-pagination>
+      </btu-message>
+    \`;
+  },
+  parameters: {
+    controls: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: 'The message has no built-in pagination — slot a \`<btu-pagination>\` into the \`actions\` slot and react to its \`btu-pagination-change\` event to swap message content. This demo cycles through 4 messages.'
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="flex flex-col gap-3">
+      <btu-message variant="primary" label="Scheduled maintenance">
+        <btu-badge slot="badge" variant="primary" size="sm" dot>Live</btu-badge>
+        <span slot="description">A status dot keeps the badge concise for ongoing states.</span>
+      </btu-message>
+      <btu-message variant="success" label="Deploy succeeded">
+        <btu-badge slot="badge" variant="success" size="sm">
+          <btu-icon symbol="check" size="xs"></btu-icon>
+          v3.1.0
+        </btu-badge>
+        <span slot="description">Slot a Lucide icon inside the badge for richer composition.</span>
+      </btu-message>
+      <btu-message variant="warning" label="Beta feature">
+        <btu-badge slot="badge" variant="primary" size="sm">Beta</btu-badge>
+        <span slot="description"
+          >The badge variant is independent — pair a primary "Beta" tag with a warning message.</span
+        >
+      </btu-message>
+    </div>
+  \`,
+  parameters: {
+    controls: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: 'The \`badge\` slot accepts a full \`<btu-badge>\`, so consumers control its \`variant\`, \`size\`, \`dot\` affordance, and inner content (e.g., an icon). The badge variant does not have to match the message variant — choose what reads best for the content.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-message variant="warning" label="API rate limits were updated">
+      <span slot="description">
+        Review your <a href="#" class="underline">usage dashboard</a> to make sure your integrations stay within the new
+        limits. <strong>Existing keys keep working through May&nbsp;31</strong>; after that, requests above the cap will
+        return <code>429 Too Many Requests</code>.
+      </span>
+      <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+        Open dashboard
+        <btu-icon symbol="arrow-right" size="sm"></btu-icon>
+      </button>
+    </btu-message>
+  \`,
+  parameters: {
+    controls: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: 'Because \`description\` is a slot rather than an attribute, you can include rich inline content — links, \`<strong>\`, \`<code>\`, or any other markup — directly in the description text.'
+      }
+    }
+  }
+}`,...b.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  args: {
+    variant: 'info',
+    symbol: 'megaphone',
+    label: 'Maintenance window scheduled for Saturday.'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Override the default icon per variant by passing any [Lucide](https://lucide.dev/icons/) icon name via the \`symbol\` attribute.'
+      }
+    }
+  }
+}`,...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="flex flex-col gap-3">
+      <btu-message variant="primary" label="Scheduled maintenance on Saturday.">
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Learn more
+        </button>
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          View changes
+          <btu-icon symbol="arrow-right" size="sm"></btu-icon>
+        </button>
+      </btu-message>
+      <btu-message variant="warning" label="API rate limits were updated">
+        <span slot="description"
+          >Review your usage dashboard to make sure your integrations are still within limits.</span
+        >
+        <button slot="actions" type="button" class="btu-button btu-button-fill-none btu-button-gray btu-button-sm">
+          Open dashboard
+          <btu-icon symbol="arrow-right" size="sm"></btu-icon>
+        </button>
+      </btu-message>
+    </div>
+  \`,
+  parameters: {
+    controls: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: 'Slot CTA buttons into the \`actions\` slot — they pin to the trailing edge and wrap below the text in narrow containers. For cycling paginated content, see the Paginated story.'
+      }
+    }
+  }
+}`,...p.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-message
+      variant="info"
+      label="Custom styled message"
+      style=\${styleMap({
+    '--message-color-background': 'oklch(0.25 0.05 260)',
+    '--message-color-foreground': 'oklch(0.95 0.02 260)',
+    '--message-border-radius': '0.75rem',
+    '--message-padding': '1.25rem 1.75rem'
+  })}
+    >
+      <span slot="description">Override theme colors and shape with CSS custom properties.</span>
+    </btu-message>
+  \`,
+  parameters: {
+    controls: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: 'CSS custom properties allow full visual customization. Use the controls panel in the Default story to experiment with \`--message-*\` properties interactively.'
+      }
+    }
+  }
+}`,...g.parameters?.docs?.source}}};const O=["Default","Variants","Dismissible","Paginated","BadgeSlot","DescriptionSlot","CustomIcon","WithActions","CustomStyling"];export{d as BadgeSlot,m as CustomIcon,g as CustomStyling,i as Default,b as DescriptionSlot,u as Dismissible,c as Paginated,l as Variants,p as WithActions,O as __namedExportsOrder,D as default};

package/dist/storybook/assets/{OnFindMixin.stories-CKoPIaks.js → OnFindMixin.stories-CUaE6pX1.js}

@@ -1,4 +1,4 @@
-import{x as h,i as v}from"./iframe-DpPeZoRd.js";import{o as k}from"./onFind-D8gPkhwL.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:`
+import{x as h,i as v}from"./iframe-DUmd7GbF.js";import{o as k}from"./onFind-t_5Bmfio.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.

package/dist/storybook/assets/{Pagination.stories-CER9zwKW.js → Pagination.stories-CXCbChNW.js}

@@ -1,4 +1,4 @@
-import{g as m,x as u}from"./iframe-DpPeZoRd.js";import{o as g}from"./style-map-WEdc6AkA.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-DUmd7GbF.js";import{o as g}from"./style-map-D_jXmlQ4.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-CO7t4Pl8.js → Popover.stories-DyptvVL3.js}

@@ -1,4 +1,4 @@
-import{g as p,x as l}from"./iframe-DpPeZoRd.js";import{o as a}from"./if-defined-aps73Iby.js";import{o as c}from"./style-map-WEdc6AkA.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-DUmd7GbF.js";import{o as a}from"./if-defined-DBQP12ek.js";import{o as c}from"./style-map-D_jXmlQ4.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-C_H-s0cp.js → ReadyMixin-BUpBkgED.js}

@@ -1 +1 @@
-import"./iframe-DpPeZoRd.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-DUmd7GbF.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-0Sny7BQc.js → RovingTabindexMixin.stories-DzEH38Tn.js}

@@ -1,4 +1,4 @@
-import{x as l,i as v}from"./iframe-DpPeZoRd.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-DUmd7GbF.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-Ci7CnFM6.js → Rtc.stories-DxQWkudF.js}

@@ -1,4 +1,4 @@
-import{x as o}from"./iframe-DpPeZoRd.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-DUmd7GbF.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-CSbM9xdE.js → ScrollShadow.stories-DbMdNLKA.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-DpPeZoRd.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-DUmd7GbF.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-D-SGY0dL.js → Switch.stories-CvSwuR0Z.js}

@@ -1,4 +1,4 @@
-import{g as k,x as c}from"./iframe-DpPeZoRd.js";import{o as s}from"./if-defined-aps73Iby.js";import{o as f}from"./style-map-WEdc6AkA.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-DUmd7GbF.js";import{o as s}from"./if-defined-DBQP12ek.js";import{o as f}from"./style-map-D_jXmlQ4.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-DXeloL5R.js → Tab.stories-CI6m8NXD.js}

@@ -1,4 +1,4 @@
-import{g as u,x as e}from"./iframe-DpPeZoRd.js";import{o as d}from"./style-map-WEdc6AkA.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-DUmd7GbF.js";import{o as d}from"./style-map-D_jXmlQ4.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-KGjrQHnj.js → Tabs.stories-BMat3ubI.js}

@@ -1,4 +1,4 @@
-import{g as b,E as i,x as s}from"./iframe-DpPeZoRd.js";import{o as c}from"./style-map-WEdc6AkA.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-DUmd7GbF.js";import{o as c}from"./style-map-D_jXmlQ4.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>