@brightspot/ui 1.9.0 → 1.11.0

package/dist/storybook/assets/Pagination.stories-BBkLEwoP.js

@@ -0,0 +1,252 @@
+import{g as m,x as u}from"./iframe-DloIUNZz.js";import{o as g}from"./style-map-DLXysq3r.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:h,argTypes:y}=m("btu-pagination"),c=e=>{const t={};return e.customBackgroundColor&&(t["--pagination-color-background"]=e.customBackgroundColor),e.customForegroundColor&&(t["--pagination-color-foreground"]=e.customForegroundColor),t},$={title:"Components/Pagination",component:"btu-pagination",tags:["autodocs"],parameters:{docs:{subtitle:"A component for navigating through paged content",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>To navigate through large sets of data</li>
+  <li>For search results, tables, and lists</li>
+  <li>In widgets and calendar views</li>
+</ul>
+
+<h3>Variants:</h3>
+<ul>
+  <li><strong>Widget</strong> (default): Built-in page size dropdown + total display + navigation</li>
+  <li><strong>Search</strong>: With page jumper dropdown (auto-managed by Pagination)</li>
+  <li><strong>Widget Small</strong>: Without first/last page buttons</li>
+  <li><strong>Calendar</strong>: Custom page-size slot (consumer-managed) + jumper slot</li>
+</ul>
+
+<h3>Page size modes:</h3>
+<ul>
+  <li><strong>Built-in</strong>: No <code>slot="page-size"</code> — Pagination renders its own <code>btu-dropdown</code> from <code>page-size-options</code> and manages everything automatically.</li>
+  <li><strong>Custom</strong>: Provide <code>slot="page-size"</code> — built-in dropdown is suppressed. Consumer owns all behavior (events, label sync, etc.).</li>
+</ul>
+        `}},actions:{handles:b},controls:{expanded:!0}},args:{...h,"total-items":200,"boundary-buttons":!0,"hide-on-single-page":!0,"page-size-changer":!0},argTypes:{...y,"--pagination-color-background":{table:{disable:!0}},"--pagination-color-foreground":{table:{disable:!0}},customBackgroundColor:{name:"--pagination-color-background",control:{type:"color"},description:"Custom background color for buttons and dropdowns",table:{category:"CSS Properties"}},customForegroundColor:{name:"--pagination-color-foreground",control:{type:"color"},description:"Custom foreground (text/icon) color",table:{category:"CSS Properties"}}},render:e=>u`
+    <btu-pagination
+      total-items="${e["total-items"]??200}"
+      page="${e.page??1}"
+      page-size="${e["page-size"]??0}"
+      page-size-options="${e["page-size-options"]??"10, 20, 50"}"
+      ?disabled="${e.disabled}"
+      ?loading="${e.loading}"
+      .hideOnSinglePage=${e["hide-on-single-page"]??!0}
+      .pageSizeChanger=${e["page-size-changer"]??!0}
+      .boundaryButtons=${e["boundary-buttons"]??!0}
+      .pageJumper=${e["page-jumper"]??!1}
+      ?hide-total-count=${e["hide-total-count"]}
+      style=${g(c(e))}
+    ></btu-pagination>
+  `},a={args:{},parameters:{docs:{description:{story:"Default Widget variant with page size selector, total display, and full navigation controls."}}}},o={args:{"total-items":500,"page-size-options":"10, 25, 50, 100","page-jumper":!0},parameters:{docs:{description:{story:'Search variant with `page-jumper` enabled. The built-in dropdown renders "Page 1" through "Page N" and updates automatically when page size or total items change.'}}}},s={args:{"total-items":100,"boundary-buttons":!1},parameters:{docs:{description:{story:"Compact widget variant without first/last page buttons. Suitable for tight spaces."}}}},i={args:{"total-items":52},render:e=>u`
+    <btu-pagination
+      total-items="${e["total-items"]??52}"
+      page="${e.page??1}"
+      page-size="1"
+      ?disabled="${e.disabled}"
+      ?loading="${e.loading}"
+      .hideOnSinglePage=${e["hide-on-single-page"]??!0}
+      .pageSizeChanger=${!1}
+      .boundaryButtons=${e["boundary-buttons"]??!0}
+      ?hide-total-count=${e["hide-total-count"]}
+      style=${g(c(e))}
+    >
+      <btu-dropdown
+        slot="page-size"
+        label="Week"
+        variant="secondary"
+        size="small"
+        aria-label="View type"
+        @btu-dropdown-item-select=${t=>{t.currentTarget.label=t.detail.label}}
+      >
+        <btu-dropdown-menu>
+          <btu-dropdown-item label="Week" value="week" selected></btu-dropdown-item>
+          <btu-dropdown-item label="Month" value="month"></btu-dropdown-item>
+        </btu-dropdown-menu>
+      </btu-dropdown>
+      <button
+        slot="jumper"
+        class="btu-button btu-button-sm"
+        @click=${t=>{const n=t.target.closest("btu-pagination");n&&(n.page=1)}}
+      >
+        Today
+      </button>
+    </btu-pagination>
+  `,parameters:{docs:{description:{story:'Calendar variant using `slot="page-size"` with a consumer-managed `btu-dropdown` for week/month selection and `slot="jumper"` for a Today button. The page-size dropdown is fully consumer-owned — Pagination does not manage its events or label.'}}}},r={args:{"total-items":200,loading:!0},parameters:{docs:{description:{story:"Loading state shows a spinner and dims the navigation controls. The `aria-busy` attribute is set on the live region."}}}},l={args:{"total-items":200,disabled:!0,page:3},parameters:{docs:{description:{story:"Disabled state prevents all interaction. All buttons and dropdowns receive the native `disabled` attribute."}}}},d={render:()=>{const e=t=>{const n=t.target;n.loading=!0,setTimeout(()=>{n.loading=!1},1e3)};return u`
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+          <label for="total-input" class="text-sm font-medium">Total Items:</label>
+          <input
+            id="total-input"
+            type="number"
+            value="200"
+            min="0"
+            class="w-24 rounded border px-2 py-1 text-sm"
+            @input=${t=>{const n=t.target,p=n.closest(".flex.flex-col")?.querySelector("btu-pagination");p&&(p.totalItems=parseInt(n.value,10)||0)}}
+          />
+        </div>
+        <btu-pagination
+          total-items="200"
+          @btu-pagination-change=${e}
+          @btu-pagination-page-size-change=${e}
+        ></btu-pagination>
+      </div>
+    `},parameters:{docs:{description:{story:"Interactive example demonstrating dynamic `totalItems` changes at runtime. Navigation triggers a simulated 1s loading state."}}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default Widget variant with page size selector, total display, and full navigation controls.'
+      }
+    }
+  }
+}`,...a.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 500,
+    'page-size-options': '10, 25, 50, 100',
+    'page-jumper': true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Search variant with \`page-jumper\` enabled. The built-in dropdown renders "Page 1" through "Page N" and updates automatically when page size or total items change.'
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 100,
+    'boundary-buttons': false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact widget variant without first/last page buttons. Suitable for tight spaces.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 52
+  },
+  render: args => html\`
+    <btu-pagination
+      total-items="\${args['total-items'] ?? 52}"
+      page="\${args.page ?? 1}"
+      page-size="1"
+      ?disabled="\${args.disabled}"
+      ?loading="\${args.loading}"
+      .hideOnSinglePage=\${args['hide-on-single-page'] ?? true}
+      .pageSizeChanger=\${false}
+      .boundaryButtons=\${args['boundary-buttons'] ?? true}
+      ?hide-total-count=\${args['hide-total-count']}
+      style=\${styleMap(paginationStyles(args))}
+    >
+      <btu-dropdown
+        slot="page-size"
+        label="Week"
+        variant="secondary"
+        size="small"
+        aria-label="View type"
+        @btu-dropdown-item-select=\${(e: CustomEvent<{
+    label: string;
+    value: string;
+    selected: boolean;
+  }>) => {
+    ;
+    (e.currentTarget as HTMLElement & {
+      label: string;
+    }).label = e.detail.label;
+  }}
+      >
+        <btu-dropdown-menu>
+          <btu-dropdown-item label="Week" value="week" selected></btu-dropdown-item>
+          <btu-dropdown-item label="Month" value="month"></btu-dropdown-item>
+        </btu-dropdown-menu>
+      </btu-dropdown>
+      <button
+        slot="jumper"
+        class="btu-button btu-button-sm"
+        @click=\${(e: Event) => {
+    const pagination = (e.target as HTMLElement).closest('btu-pagination');
+    if (pagination) pagination.page = 1;
+  }}
+      >
+        Today
+      </button>
+    </btu-pagination>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Calendar variant using \`slot="page-size"\` with a consumer-managed \`btu-dropdown\` for week/month selection and \`slot="jumper"\` for a Today button. The page-size dropdown is fully consumer-owned — Pagination does not manage its events or label.'
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 200,
+    loading: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Loading state shows a spinner and dims the navigation controls. The \`aria-busy\` attribute is set on the live region.'
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 200,
+    disabled: true,
+    page: 3
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled state prevents all interaction. All buttons and dropdowns receive the native \`disabled\` attribute.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const simulateLoading = (e: CustomEvent) => {
+      const pagination = e.target as HTMLElement & {
+        loading: boolean;
+      };
+      pagination.loading = true;
+      setTimeout(() => {
+        pagination.loading = false;
+      }, 1000);
+    };
+    return html\`
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+          <label for="total-input" class="text-sm font-medium">Total Items:</label>
+          <input
+            id="total-input"
+            type="number"
+            value="200"
+            min="0"
+            class="w-24 rounded border px-2 py-1 text-sm"
+            @input=\${(e: Event) => {
+      const input = e.target as HTMLInputElement;
+      const pagination = (input.closest('.flex.flex-col') as HTMLElement)?.querySelector('btu-pagination') as HTMLElement & {
+        totalItems: number;
+      };
+      if (pagination) pagination.totalItems = parseInt(input.value, 10) || 0;
+    }}
+          />
+        </div>
+        <btu-pagination
+          total-items="200"
+          @btu-pagination-change=\${simulateLoading}
+          @btu-pagination-page-size-change=\${simulateLoading}
+        ></btu-pagination>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive example demonstrating dynamic \`totalItems\` changes at runtime. Navigation triggers a simulated 1s loading state.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};const z=["Default","Search","WidgetSmall","Calendar","Loading","Disabled","DynamicTotal"];export{i as Calendar,a as Default,l as Disabled,d as DynamicTotal,r as Loading,o as Search,s as WidgetSmall,z as __namedExportsOrder,$ as default};

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

@@ -1,4 +1,4 @@
-import{g as a,x as r}from"./iframe-BeKreX-l.js";import{o as c}from"./if-defined-BFyUeSVF.js";import{o as d}from"./style-map-CmHqpCu1.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:g,argTypes:e}=a("btu-popover"),y={title:"Components/Popover",component:"btu-popover",tags:["autodocs"],parameters:{docs:{subtitle:"Rich interactive content anchored to a trigger element",description:{component:`
+import{g as a,x as r}from"./iframe-DloIUNZz.js";import{o as c}from"./if-defined-B1RdczOE.js";import{o as d}from"./style-map-DLXysq3r.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:g,argTypes:e}=a("btu-popover"),y={title:"Components/Popover",component:"btu-popover",tags:["autodocs"],parameters:{docs:{subtitle:"Rich interactive content anchored to a trigger element",description:{component:`
 \`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>
@@ -90,7 +90,7 @@ import{g as a,x as r}from"./iframe-BeKreX-l.js";import{o as c}from"./if-defined-
         <div slot="content">Popover positioned right of the trigger</div>
       </btu-popover>
     </div>
-  `,parameters:{docs:{description:{story:"Popovers support four positions: `top`, `bottom`, `left`, and `right`. Each auto-flips if constrained by the viewport."},story:{inline:!1,iframeHeight:300}}}},s={render:()=>r`
+  `,parameters:{docs:{description:{story:"Popovers support four positions: `top`, `bottom`, `left`, and `right`. Each auto-flips if constrained by the viewport."}}}},s={render:()=>r`
     <style>
       ${p} .popover-custom-content {
         display: flex;
@@ -182,7 +182,7 @@ import{g as a,x as r}from"./iframe-BeKreX-l.js";import{o as c}from"./if-defined-
         </div>
       </btu-popover>
     </div>
-  `,parameters:{docs:{description:{story:"Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger)."},story:{inline:!1,iframeHeight:300}}}},l={render:()=>r`
+  `,parameters:{docs:{description:{story:"Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger)."}}}},l={render:()=>r`
     <style>
       ${p} .custom-popover-trigger {
         display: inline-flex;
@@ -260,10 +260,6 @@ import{g as a,x as r}from"./iframe-BeKreX-l.js";import{o as c}from"./if-defined-
     docs: {
       description: {
         story: 'Popovers support four positions: \`top\`, \`bottom\`, \`left\`, and \`right\`. Each auto-flips if constrained by the viewport.'
-      },
-      story: {
-        inline: false,
-        iframeHeight: 300
       }
     }
   }
@@ -365,10 +361,6 @@ import{g as a,x as r}from"./iframe-BeKreX-l.js";import{o as c}from"./if-defined-
     docs: {
       description: {
         story: 'Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger).'
-      },
-      story: {
-        inline: false,
-        iframeHeight: 300
       }
     }
   }

package/dist/storybook/assets/{ReadyMixin-6On1MFFr.js → ReadyMixin-Cw2Dfbu2.js}

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

package/dist/storybook/assets/RovingTabindexMixin.stories-BWaFx9mu.js

@@ -0,0 +1,192 @@
+import{x as l,i as v}from"./iframe-DloIUNZz.js";import{t as m}from"./custom-element-UsVr97OX.js";import"./preload-helper-PPVm8Dsz.js";const h=n=>{class i extends n{constructor(){super(...arguments),this._rovingIndex=0}_getRovingTargets(){return[]}_rovingFocus(t,e=!0){const o=this._getRovingTargets();if(o.length===0)return;const r=Math.max(0,Math.min(t,o.length-1));o.forEach((u,b)=>u.setAttribute("tabindex",b===r?"0":"-1")),e&&o[r]?.focus(),this._rovingIndex=r}_rovingNext(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e<t.length-1?e+1:0;this._rovingFocus(o)}_rovingPrev(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e>0?e-1:t.length-1;this._rovingFocus(o)}_rovingFirst(){this._rovingFocus(0)}_rovingLast(){const t=this._getRovingTargets();t.length>0&&this._rovingFocus(t.length-1)}_rovingCurrentIndex(){const t=document.activeElement;return this._getRovingTargets().findIndex(e=>e===t||e.contains(t))}}return i};var a=Object.freeze,x=Object.defineProperty,p=Object.getOwnPropertyDescriptor,f=(n,i,d,t)=>{for(var e=t>1?void 0:t?p(i,d):i,o=n.length-1,r;o>=0;o--)(r=n[o])&&(e=r(e)||e);return e},y=(n,i)=>a(x(n,"raw",{value:a(n.slice())})),c;const T={title:"Mixins/Roving Tabindex",tags:["autodocs"],parameters:{docs:{description:{component:`
+\`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.
+
+<h3>What RovingTabindexMixin Provides</h3>
+
+<table>
+  <thead>
+    <tr>
+      <th>Member</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>_getRovingTargets()</code></td>
+      <td>Method (override)</td>
+      <td>Return focusable <code>HTMLElement[]</code> in navigation order. <strong>Subclass must override.</strong></td>
+    </tr>
+    <tr>
+      <td><code>_rovingFocus(index, shouldFocus?)</code></td>
+      <td>Method</td>
+      <td>Set <code>tabindex="0"</code> on target at index, <code>"-1"</code> on all others. Focuses the element unless <code>shouldFocus=false</code>.</td>
+    </tr>
+    <tr>
+      <td><code>_rovingNext()</code></td>
+      <td>Method</td>
+      <td>Move focus to next target (wraps to first)</td>
+    </tr>
+    <tr>
+      <td><code>_rovingPrev()</code></td>
+      <td>Method</td>
+      <td>Move focus to previous target (wraps to last)</td>
+    </tr>
+    <tr>
+      <td><code>_rovingFirst()</code></td>
+      <td>Method</td>
+      <td>Focus the first target</td>
+    </tr>
+    <tr>
+      <td><code>_rovingLast()</code></td>
+      <td>Method</td>
+      <td>Focus the last target</td>
+    </tr>
+    <tr>
+      <td><code>_rovingCurrentIndex()</code></td>
+      <td>Method</td>
+      <td>Find index of the currently focused target</td>
+    </tr>
+    <tr>
+      <td><code>_rovingIndex</code></td>
+      <td>Property</td>
+      <td>Index of the last focused target</td>
+    </tr>
+  </tbody>
+</table>
+
+<h3>Keydown Handler is NOT Included</h3>
+
+<p>The mixin intentionally does <strong>not</strong> install a keyboard event handler. Each component defines its own because:</p>
+<ul>
+  <li><strong>Toolbars</strong> use <code>ArrowRight</code>/<code>ArrowLeft</code> (horizontal) with RTL awareness</li>
+  <li><strong>Menus</strong> use <code>ArrowDown</code>/<code>ArrowUp</code> (vertical) plus Enter/Space/Escape/Tab</li>
+</ul>
+
+<h3>Where It's Used</h3>
+<ul>
+  <li><strong>ActionBar</strong> — horizontal toolbar with ArrowRight/Left, RTL support</li>
+  <li><strong>DropdownMenu</strong> — vertical menu with ArrowDown/Up, typeahead</li>
+</ul>
+
+<h3>TypeScript Usage</h3>
+
+\`\`\`typescript
+import { RovingTabindexMixin } from './RovingTabindexMixin'
+import { EventEmitterMixin } from './EventEmitterMixin'
+import { ReadyMixin } from './ReadyMixin'
+import { LitElement } from 'lit'
+
+class MyToolbar extends RovingTabindexMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
+  // 1. Override to return your focusable elements
+  _getRovingTargets(): HTMLElement[] {
+    return Array.from(this.querySelectorAll('button'))
+  }
+
+  // 2. Install your own keydown handler
+  connectedCallback() {
+    super.connectedCallback()
+    this.addEventListener('keydown', this._handleKeydown)
+  }
+
+  private _handleKeydown = (e: KeyboardEvent) => {
+    switch (e.key) {
+      case 'ArrowRight': e.preventDefault(); this._rovingNext(); break
+      case 'ArrowLeft':  e.preventDefault(); this._rovingPrev(); break
+      case 'Home':       e.preventDefault(); this._rovingFirst(); break
+      case 'End':        e.preventDefault(); this._rovingLast(); break
+    }
+  }
+}
+\`\`\`
+
+<h3>Mixin Composition Order</h3>
+
+\`\`\`typescript
+class MyComponent extends RovingTabindexMixin(EventEmitterMixin(ReadyMixin(LitElement))) {}
+\`\`\`
+        `}}}};let g=class extends h(v){constructor(){super(...arguments),this._handleKeydown=n=>{switch(n.key){case"ArrowRight":n.preventDefault(),this._rovingNext();break;case"ArrowLeft":n.preventDefault(),this._rovingPrev();break;case"Home":n.preventDefault(),this._rovingFirst();break;case"End":n.preventDefault(),this._rovingLast();break}}}createRenderRoot(){return this}_getRovingTargets(){return Array.from(this.querySelectorAll(".roving-demo-btn"))}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeydown)}render(){return l`
+      <div role="toolbar" aria-label="Demo toolbar" style="display: flex; gap: 0.5rem;">
+        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="0">Item 1</button>
+        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="-1">Item 2</button>
+        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="-1">Item 3</button>
+        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="-1">Item 4</button>
+        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="-1">Item 5</button>
+      </div>
+    `}};g=f([m("roving-demo")],g);const s={render:()=>l(c||(c=y([`<div class="flex flex-col gap-4">
+      <div>
+        <h4 class="mb-2 font-bold">Interactive Roving Tabindex Demo</h4>
+        <p class="mb-2 text-sm text-gray-600">
+          Click any button below, then use <strong>Arrow Right/Left</strong> to move focus between items.
+          <strong>Home</strong> and <strong>End</strong> jump to first/last. Focus wraps at both ends.
+        </p>
+        <p class="mb-4 text-sm text-gray-600">
+          Notice only the focused button has <code>tabindex="0"</code> &mdash; pressing <strong>Tab</strong> leaves the
+          toolbar entirely, and <strong>Shift+Tab</strong> returns to the last focused item.
+        </p>
+      </div>
+
+      <roving-demo id="roving-demo"></roving-demo>
+
+      <div id="roving-status" class="text-sm text-gray-500" style="font-family: monospace;"></div>
+
+      <script>
+        ;(() => {
+          const demo = document.getElementById('roving-demo')
+          const status = document.getElementById('roving-status')
+          if (!demo || !status) return
+
+          demo.addEventListener('focusin', () => {
+            const buttons = demo.querySelectorAll('.roving-demo-btn')
+            const indices = Array.from(buttons).map(b => b.getAttribute('tabindex'))
+            status.textContent = 'tabindex: [' + indices.join(', ') + ']  |  _rovingIndex: ' + demo._rovingIndex
+          })
+
+          demo.addEventListener('keyup', () => {
+            const buttons = demo.querySelectorAll('.roving-demo-btn')
+            const indices = Array.from(buttons).map(b => b.getAttribute('tabindex'))
+            status.textContent = 'tabindex: [' + indices.join(', ') + ']  |  _rovingIndex: ' + demo._rovingIndex
+          })
+        })()
+      <\/script>
+    </div>`])))};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-col gap-4">
+      <div>
+        <h4 class="mb-2 font-bold">Interactive Roving Tabindex Demo</h4>
+        <p class="mb-2 text-sm text-gray-600">
+          Click any button below, then use <strong>Arrow Right/Left</strong> to move focus between items.
+          <strong>Home</strong> and <strong>End</strong> jump to first/last. Focus wraps at both ends.
+        </p>
+        <p class="mb-4 text-sm text-gray-600">
+          Notice only the focused button has <code>tabindex="0"</code> &mdash; pressing <strong>Tab</strong> leaves the
+          toolbar entirely, and <strong>Shift+Tab</strong> returns to the last focused item.
+        </p>
+      </div>
+
+      <roving-demo id="roving-demo"></roving-demo>
+
+      <div id="roving-status" class="text-sm text-gray-500" style="font-family: monospace;"></div>
+
+      <script>
+        ;(() => {
+          const demo = document.getElementById('roving-demo')
+          const status = document.getElementById('roving-status')
+          if (!demo || !status) return
+
+          demo.addEventListener('focusin', () => {
+            const buttons = demo.querySelectorAll('.roving-demo-btn')
+            const indices = Array.from(buttons).map(b => b.getAttribute('tabindex'))
+            status.textContent = 'tabindex: [' + indices.join(', ') + ']  |  _rovingIndex: ' + demo._rovingIndex
+          })
+
+          demo.addEventListener('keyup', () => {
+            const buttons = demo.querySelectorAll('.roving-demo-btn')
+            const indices = Array.from(buttons).map(b => b.getAttribute('tabindex'))
+            status.textContent = 'tabindex: [' + indices.join(', ') + ']  |  _rovingIndex: ' + demo._rovingIndex
+          })
+        })()
+      <\/script>
+    </div>\`
+}`,...s.parameters?.docs?.source}}};const A=["RovingTabindex"];export{s as RovingTabindex,A as __namedExportsOrder,T as default};

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

@@ -1,4 +1,4 @@
-import{x as o}from"./iframe-BeKreX-l.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-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";const r={title:"Utilities/RTC",tags:["autodocs"],parameters:{docs:{subtitle:"The `rtc` module provides real-time communication between browser tabs and the Brightspot CMS server. Uses BroadcastChannel for cross-tab coordination with leader election, and Server-Sent Events for server communication."},controls:{expanded:!0}}},e={render:()=>o`
     <div class="space-y-6 text-sm">
       <div>
         <h3 class="mb-2 font-bold">Overview</h3>

package/dist/storybook/assets/ScrollShadow.stories-C6XmrRLm.js

@@ -0,0 +1,17 @@
+import{x as a}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
+    <style>
+      :root {
+        --can-scroll:   ;
+      }
+    </style>
+    <div class=${["flex","gap-2","bg-gray-500",e].join(" ")}>
+      ${r.map((s,t)=>a`<div
+            class="text-md flex aspect-square h-[100px] items-center justify-center"
+            style="background:oklch(80% 50% ${Math.floor(Math.random()*710)+10});"
+          >
+            ${s}
+          </div>`)}
+    </div>
+  `},n={title:"CSS Plugins/Scroll Shadow",component:"btu-scrollshadow",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-scrollshadow` utility class for adding shadows to the edges of a scrollable container once the content overflows. The shadows use our gray color palette. You can choose which shade of gray you want. The scroll container must not already use before & after pseudo elements. But, if you need to use before/after modifiers on the container, make sure you also manually set the content property to the `--whitespace` variable. This is a workaround for TWCSS automatically adding a content property to the before/after pseudo-elements, which overrides the `--whitespace` variable by default. Note: this currently only supports x-axis scrolling."},controls:{expanded:!0}},render:e=>l(e),argTypes:{theme:{control:{type:"select"},description:"Choose a shade of gray for the scroll shadow. 25 is almost white, and 900 is almost black.",options:["btu-scrollshadow-25","btu-scrollshadow-50","btu-scrollshadow-100","btu-scrollshadow-200","btu-scrollshadow-300","btu-scrollshadow-400","btu-scrollshadow-500","btu-scrollshadow-600","btu-scrollshadow-700","btu-scrollshadow-800","btu-scrollshadow-900"]}},args:{}},o={args:{}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...o.parameters?.docs?.source}}};const i=["Default"];export{o as Default,i as __namedExportsOrder,n as default};