@brightspot/ui 1.10.0 → 3.0.0

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

@@ -0,0 +1,192 @@
+import{x as l,i as v}from"./iframe-Sf9RHZFu.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-gray btu-button-md btu-button" tabindex="0">Item 1</button>
+        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="-1">Item 2</button>
+        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="-1">Item 3</button>
+        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="-1">Item 4</button>
+        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="-1">Item 5</button>
+      </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-BVJc1vCA.js → Rtc.stories-DQJlCXWR.js}

@@ -1,4 +1,4 @@
-import{x as o}from"./iframe-BqvwP3or.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-Sf9RHZFu.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>
@@ -11,7 +11,7 @@ import{x as o}from"./iframe-BqvwP3or.js";import"./preload-helper-PPVm8Dsz.js";co
 
       <div class="rounded border border-gray-200 bg-gray-50 p-4">
         <h4 class="mb-2 font-bold">Architecture Diagram</h4>
-        <pre class="text-xs leading-relaxed text-gray-700">
+        <pre class="leading-relaxed text-xs text-gray-700">
 ┌─────────────────────────────────────────────────┐
 │                  CMS Server                     │
 │              (Server-Sent Events)               │
@@ -143,7 +143,7 @@ rtc.execute('com.example.MyAction', { id: '123', value: 'updated' })</code></pre
 
       <div class="rounded border border-gray-200 bg-gray-50 p-4">
         <h4 class="mb-2 font-bold">Architecture Diagram</h4>
-        <pre class="text-xs leading-relaxed text-gray-700">
+        <pre class="leading-relaxed text-xs text-gray-700">
 ┌─────────────────────────────────────────────────┐
 │                  CMS Server                     │
 │              (Server-Sent Events)               │

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

@@ -0,0 +1,17 @@
+import{x as a}from"./iframe-Sf9RHZFu.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="flex aspect-square h-[100px] items-center justify-center text-md"
+            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};

package/dist/storybook/assets/{Switch.stories-BEEHP8mD.js → Switch.stories-BEeqPZiP.js}

@@ -1,4 +1,4 @@
-import{g as k,x as c}from"./iframe-BqvwP3or.js";import{o as s}from"./if-defined-BZFPaJjl.js";import{o as f}from"./style-map-CBrSnxRe.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-Sf9RHZFu.js";import{o as s}from"./if-defined-CgfCxQoV.js";import{o as f}from"./style-map-B99QiqCo.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>
@@ -7,9 +7,9 @@ import{g as k,x as c}from"./iframe-BqvwP3or.js";import{o as s}from"./if-defined-
 </ul>
 
 <p>Track icons are powered by the <a href="?path=/docs/components-icon--docs">Icon component</a>. Visit its docs for all available icon names.</p>
-        `}},actions:{handles:v},controls:{expanded:!0}},args:{...y,label:"Label",checked:!1},argTypes:{...g,"--switch-color-track-on":{table:{disable:!0}},"--switch-color-track-off":{table:{disable:!0}},"--switch-color-knob":{table:{disable:!0}},"--switch-label-spacing":{table:{disable:!0}},"--switch-icon-size":{table:{disable:!0}},"--switch-track-icon-size":{table:{disable:!0}},customColorOn:{name:"--switch-color-track-on",control:{type:"color"},description:"Background color when the toggle is checked",table:{category:"CSS Properties"}},customColorOff:{name:"--switch-color-track-off",control:{type:"color"},description:"Background color when the toggle is unchecked",table:{category:"CSS Properties"}},customKnobColor:{name:"--switch-color-knob",control:{type:"color"},description:"Color of the sliding circular handle",table:{category:"CSS Properties"}},customLabelSpacing:{name:"--switch-label-spacing",control:{type:"text"},description:"Distance between the switch and the text label (default: 0.75rem)",table:{category:"CSS Properties"}},"on-icon":{...g["on-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when checked. Only icons available in Lucide v'+w+" are supported."},"off-icon":{...g["off-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when unchecked. Only icons available in Lucide v'+w+" are supported."},customIconSize:{name:"--switch-track-icon-size",control:{type:"text"},description:"Size of the track icons (e.g., `0.5rem`, `0.75rem`, `1rem`). Defaults: sm `0.5rem`, md `0.625rem`, lg `0.75rem`.",table:{category:"CSS Properties"}}},render:e=>c`
+        `}},actions:{handles:v},controls:{expanded:!0}},args:{...y,label:"Label",checked:!1},argTypes:{...g,"--switch-color-track-on":{table:{disable:!0}},"--switch-color-track-off":{table:{disable:!0}},"--switch-color-knob":{table:{disable:!0}},"--switch-label-spacing":{table:{disable:!0}},"--switch-icon-size":{table:{disable:!0}},"--switch-track-icon-size":{table:{disable:!0}},customColorOn:{name:"--switch-color-track-on",control:{type:"color"},description:"Background color when the toggle is checked",table:{category:"css properties"}},customColorOff:{name:"--switch-color-track-off",control:{type:"color"},description:"Background color when the toggle is unchecked",table:{category:"css properties"}},customKnobColor:{name:"--switch-color-knob",control:{type:"color"},description:"Color of the sliding circular handle",table:{category:"css properties"}},customLabelSpacing:{name:"--switch-label-spacing",control:{type:"text"},description:"Distance between the switch and the text label (default: 0.75rem)",table:{category:"css properties"}},"on-icon":{...g["on-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when checked. Only icons available in Lucide v'+w+" are supported."},"off-icon":{...g["off-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when unchecked. Only icons available in Lucide v'+w+" are supported."},customIconSize:{name:"--switch-track-icon-size",control:{type:"text"},description:"Size of the track icons (e.g., `0.5rem`, `0.75rem`, `1rem`). Defaults: sm `0.5rem`, md `0.625rem`, lg `0.75rem`.",table:{category:"css properties"}}},render:e=>c`
     <btu-switch
-      size=${e.size??"small"}
+      size=${e.size??"sm"}
       label=${s(e.label)}
       description=${s(e.description)}
       label-position=${e["label-position"]??"end"}
@@ -20,17 +20,17 @@ import{g as k,x as c}from"./iframe-BqvwP3or.js";import{o as s}from"./if-defined-
       ?disabled=${e.disabled}
       style=${f(S(e))}
     ></btu-switch>
-  `},i={args:{}},a={args:{checked:!0,label:"Enabled"},parameters:{docs:{description:{story:"Switch in the checked/on state. The track uses `--switch-color-track-on` (defaults to primary-700)."}}}},r={args:{label:"Enable notifications",description:"Receive updates via email",checked:!0},parameters:{docs:{description:{story:"Switch with both a primary label and a secondary description."}}}},l={args:{label:"Unavailable option",disabled:!0},parameters:{docs:{description:{story:"Disabled state via the `disabled` attribute. The track opacity is reduced and the wrapper cursor changes to `not-allowed`."}}}},d={args:{label:"Previously enabled",disabled:!0,checked:!0},parameters:{docs:{description:{story:"Disabled switch in the checked state. Useful for showing a locked-on setting."}}}},h={args:{label:"Label on the left","label-position":"start"},parameters:{docs:{description:{story:'Place the label before the switch using `label-position="start"`.'}}}},u={args:{label:"Notifications",checked:!0,"on-icon":"check","off-icon":"x"},parameters:{docs:{description:{story:"Track icons via `on-icon` and `off-icon` attributes. Icons use Lucide names (e.g., `check`, `x`, `bell`, `bell-off`)."}}}},m={render:()=>c`
+  `},i={args:{}},a={args:{checked:!0,label:"Enabled"},parameters:{docs:{description:{story:"Switch in the checked/on state. The track uses `--switch-color-track-on` (defaults to primary-700)."}}}},r={args:{label:"Enable notifications",description:"Receive updates via email",checked:!0},parameters:{docs:{description:{story:"Switch with both a primary label and a secondary description."}}}},l={args:{label:"Unavailable option",disabled:!0},parameters:{docs:{description:{story:"Disabled state via the `disabled` attribute. The track opacity is reduced and the wrapper cursor changes to `not-allowed`."}}}},d={args:{label:"Previously enabled",disabled:!0,checked:!0},parameters:{docs:{description:{story:"Disabled switch in the checked state. Useful for showing a locked-on setting."}}}},h={args:{label:"Label on the left","label-position":"start"},parameters:{docs:{description:{story:'Place the label before the switch using `label-position="start"`.'}}}},u={args:{label:"Notifications",checked:!0,"on-icon":"check","off-icon":"x"},parameters:{docs:{description:{story:"Track icons via `on-icon` and `off-icon` attributes. Icons use Lucide names (e.g., `check`, `x`, `bell`, `bell-off`)."}}}},b={render:()=>c`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
-      ${["small","medium","large"].map(e=>c`
+      ${["sm","md","lg"].map(e=>c`
           <btu-switch size=${e} label="${e} with icons" on-icon="check" off-icon="x" checked></btu-switch>
         `)}
     </div>
-  `,parameters:{docs:{description:{story:"Track icons scale automatically with the switch size."}}}},b={render:()=>c`
+  `,parameters:{docs:{description:{story:"Track icons scale automatically with the switch size."}}}},m={render:()=>c`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
-      ${["small","medium","large"].map(e=>c` <btu-switch size=${e} label="${e} size" checked></btu-switch> `)}
+      ${["sm","md","lg"].map(e=>c` <btu-switch size=${e} label="${e} size" checked></btu-switch> `)}
     </div>
-  `,parameters:{docs:{description:{story:"The three available size variants: `small` (default), `medium`, and `large`."}}}},p={render:()=>c`
+  `,parameters:{docs:{description:{story:"The three available size variants: `sm` (default), `md`, and `lg`."}}}},p={render:()=>c`
     <div class="flex flex-col gap-6">
       <div class="flex flex-col gap-2">
         <strong>Custom colors:</strong>
@@ -71,7 +71,7 @@ import{g as k,x as c}from"./iframe-BqvwP3or.js";import{o as s}from"./if-defined-
           <btu-switch label="Email notifications" name="email" checked></btu-switch>
           <btu-switch label="SMS notifications" name="sms"></btu-switch>
           <btu-switch label="Push notifications" name="push" checked></btu-switch>
-          <button type="submit" class="btu-button btu-button-sm w-fit">Submit</button>
+          <button type="submit" class="btu-button-sm btu-button w-fit">Submit</button>
           <pre class="form-output text-xs text-gray-600"></pre>
         </form>
       </div>
@@ -88,9 +88,9 @@ import{g as k,x as c}from"./iframe-BqvwP3or.js";import{o as s}from"./if-defined-
       <div class="flex flex-col gap-2">
         <strong>Programmatic control:</strong>
         <div class="flex items-center gap-4">
-          <btu-switch id="programmatic-switch" label="Controlled switch" size="medium"></btu-switch>
+          <btu-switch id="programmatic-switch" label="Controlled switch" size="md"></btu-switch>
           <button
-            class="btu-button btu-button-sm"
+            class="btu-button-sm btu-button"
             @click=${()=>{const e=document.getElementById("programmatic-switch");e&&(e.checked=!e.checked)}}
           >
             Toggle externally
@@ -176,10 +176,10 @@ import{g as k,x as c}from"./iframe-BqvwP3or.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+}`,...u.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
-      \${(['small', 'medium', 'large'] as const).map(size => html\`
+      \${(['sm', 'md', 'lg'] as const).map(size => html\`
           <btu-switch size=\${size} label="\${size} with icons" on-icon="check" off-icon="x" checked></btu-switch>
         \`)}
     </div>
@@ -191,20 +191,20 @@ import{g as k,x as c}from"./iframe-BqvwP3or.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...m.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+}`,...b.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
-      \${(['small', 'medium', 'large'] as const).map(size => html\` <btu-switch size=\${size} label="\${size} size" checked></btu-switch> \`)}
+      \${(['sm', 'md', 'lg'] as const).map(size => html\` <btu-switch size=\${size} label="\${size} size" checked></btu-switch> \`)}
     </div>
   \`,
   parameters: {
     docs: {
       description: {
-        story: 'The three available size variants: \`small\` (default), \`medium\`, and \`large\`.'
+        story: 'The three available size variants: \`sm\` (default), \`md\`, and \`lg\`.'
       }
     }
   }
-}`,...b.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+}`,...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-col gap-6">
       <div class="flex flex-col gap-2">
@@ -264,7 +264,7 @@ import{g as k,x as c}from"./iframe-BqvwP3or.js";import{o as s}from"./if-defined-
           <btu-switch label="Email notifications" name="email" checked></btu-switch>
           <btu-switch label="SMS notifications" name="sms"></btu-switch>
           <btu-switch label="Push notifications" name="push" checked></btu-switch>
-          <button type="submit" class="btu-button btu-button-sm w-fit">Submit</button>
+          <button type="submit" class="btu-button-sm btu-button w-fit">Submit</button>
           <pre class="form-output text-xs text-gray-600"></pre>
         </form>
       </div>
@@ -281,9 +281,9 @@ import{g as k,x as c}from"./iframe-BqvwP3or.js";import{o as s}from"./if-defined-
       <div class="flex flex-col gap-2">
         <strong>Programmatic control:</strong>
         <div class="flex items-center gap-4">
-          <btu-switch id="programmatic-switch" label="Controlled switch" size="medium"></btu-switch>
+          <btu-switch id="programmatic-switch" label="Controlled switch" size="md"></btu-switch>
           <button
-            class="btu-button btu-button-sm"
+            class="btu-button-sm btu-button"
             @click=\${() => {
     const sw = document.getElementById('programmatic-switch') as HTMLElement & {
       checked: boolean;
@@ -309,4 +309,4 @@ import{g as k,x as c}from"./iframe-BqvwP3or.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...p.parameters?.docs?.source}}};const D=["Default","Checked","WithDescription","Disabled","DisabledChecked","LabelStart","WithIcons","WithIconsSizes","Sizes","AdvancedUsage"];export{p as AdvancedUsage,a as Checked,i as Default,l as Disabled,d as DisabledChecked,h as LabelStart,b as Sizes,r as WithDescription,u as WithIcons,m as WithIconsSizes,D as __namedExportsOrder,L as default};
+}`,...p.parameters?.docs?.source}}};const D=["Default","Checked","WithDescription","Disabled","DisabledChecked","LabelStart","WithIcons","WithIconsSizes","Sizes","AdvancedUsage"];export{p as AdvancedUsage,a as Checked,i as Default,l as Disabled,d as DisabledChecked,h as LabelStart,m as Sizes,r as WithDescription,u as WithIcons,b as WithIconsSizes,D as __namedExportsOrder,L as default};

package/dist/storybook/assets/Tab.stories-DpB3I-WZ.js

@@ -0,0 +1,218 @@
+import{g as u,x as e}from"./iframe-Sf9RHZFu.js";import{o as d}from"./style-map-B99QiqCo.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.
+
+<h3>Props managed by btu-tabs:</h3>
+<p><code>size</code> and active state are propagated from the parent — do not set them directly.</p>
+        `}},actions:{handles:c},controls:{expanded:!0}},args:{...m,label:"Main",name:"main",symbol:"",badge:void 0},argTypes:{...t,size:{table:{disable:!0}},"--badge-color-background":{table:{disable:!0}},"--badge-color-foreground":{table:{disable:!0}},label:{...t.label,control:{type:"text"},description:"Text displayed in the tab."},description:{...t.description,control:{type:"text"},description:"Accessibility description for screen readers (`aria-description`)."},disabled:{...t.disabled,control:{type:"boolean"},description:"Whether the tab is disabled and non-interactive."},symbol:{...t.symbol,control:{type:"text"},description:"Lucide icon name to display."},"icon-position":{...t["icon-position"],control:{type:"select"},options:["leading","trailing"],description:"Placement of the icon relative to the label."},"icon-only":{...t["icon-only"],control:{type:"boolean"},description:'When true, hides the label visually while maintaining accessibility. Intended for use with `variant="full"` only.'},error:{...t.error,control:{type:"boolean"},description:"When true, displays an error badge on the tab."},badge:{...t.badge,control:{type:"text"},description:'Displays a badge with the given value alongside the label. Intended for use with `variant="full"` only.'},customBadgeBackground:{name:"--badge-color-background",control:{type:"color"},description:"Background color of the count badge (default: gray-50)",table:{category:"css properties"}},customBadgeForeground:{name:"--badge-color-foreground",control:{type:"color"},description:"Text color of the count badge (default: gray-700)",table:{category:"css properties"}}},render:a=>{const i={};return a.customBadgeBackground&&(i["--badge-color-background"]=a.customBadgeBackground),a.customBadgeForeground&&(i["--badge-color-foreground"]=a.customBadgeForeground),e`
+      <btu-tabs size="md" active-tab="main" style=${d(i)}>
+        <btu-tab
+          name="main"
+          label="${a.label}"
+          ?disabled="${a.disabled}"
+          .symbol="${a.symbol||""}"
+          .iconPosition="${a["icon-position"]||"leading"}"
+          .iconOnly="${a["icon-only"]??!1}"
+          ?error="${a.error}"
+          .badge="${a.badge}"
+          description="${a.description||""}"
+        ></btu-tab>
+        <btu-tab name="other" label="Other"></btu-tab>
+      </btu-tabs>
+    `}},b={args:{}},n={render:()=>e`
+    <div class="flex flex-col gap-8">
+      <btu-tabs size="md" active-tab="dashboard">
+        <btu-tab name="dashboard" label="Dashboard" symbol="layout-dashboard"></btu-tab>
+        <btu-tab name="search" label="Search" symbol="search"></btu-tab>
+        <btu-tab name="settings" label="Settings" symbol="settings" icon-position="trailing"></btu-tab>
+      </btu-tabs>
+      <btu-tabs size="md" variant="menu" active-tab="dashboard">
+        <btu-tab name="dashboard" label="Dashboard" symbol="layout-dashboard"></btu-tab>
+        <btu-tab name="search" label="Search" symbol="search"></btu-tab>
+        <btu-tab name="settings" label="Settings" symbol="settings" icon-position="trailing"></btu-tab>
+      </btu-tabs>
+    </div>
+  `,parameters:{docs:{description:{story:"Set `symbol` to any Lucide icon name. Use `icon-position` to place the icon before (default) or after the label."}}}},o={render:()=>e`
+    <btu-tabs size="md" active-tab="dashboard">
+      <btu-tab name="dashboard" label="Dashboard" symbol="layout-dashboard" icon-only></btu-tab>
+      <btu-tab name="search" label="Search" symbol="search" icon-only></btu-tab>
+      <btu-tab name="settings" label="Settings" symbol="settings" icon-only></btu-tab>
+      <btu-tab name="help" label="Help" symbol="circle-help" icon-only></btu-tab>
+    </btu-tabs>
+  `,parameters:{docs:{description:{story:'Set `icon-only` to visually hide the label while keeping it accessible via `aria-label`. Intended for use with `variant="full"` only — the `menu` variant always shows the label text.'}}}},r={render:()=>e`
+    <btu-tabs size="md" active-tab="inbox">
+      <btu-tab name="inbox" label="Inbox" badge="12"></btu-tab>
+      <btu-tab name="drafts" label="Drafts" badge="3"></btu-tab>
+      <btu-tab name="sent" label="Sent"></btu-tab>
+      <btu-tab name="spam" label="Spam" badge="99+"></btu-tab>
+      <btu-tab
+        name="primary"
+        label="Primary"
+        badge="5"
+        style=${d({"--badge-color-background":"oklch(var(--btu-theme-primary-50))","--badge-color-foreground":"oklch(var(--btu-theme-primary-700))"})}
+      ></btu-tab>
+      <btu-tab
+        name="error"
+        label="Error"
+        badge="2"
+        style=${d({"--badge-color-background":"oklch(var(--btu-theme-error-50))","--badge-color-foreground":"oklch(var(--btu-theme-error-700))"})}
+      ></btu-tab>
+    </btu-tabs>
+  `,parameters:{docs:{description:{story:'Set `badge` to display a numeric or text badge alongside the label. Defaults to a gray badge (gray-50 background, gray-700 text). Use `--badge-color-background` and `--badge-color-foreground` to customize — inline on a specific `btu-tab` to scope it, or on `btu-tabs` to apply to all. Intended for use with `variant="full"` only.'}}}},s={render:()=>e`
+    <div class="flex flex-col gap-8">
+      <btu-tabs size="md" active-tab="main">
+        <btu-tab name="main" label="Main" error></btu-tab>
+        <btu-tab name="seo" label="SEO"></btu-tab>
+        <btu-tab name="overrides" label="Overrides"></btu-tab>
+        <btu-tab name="styles" label="Styles" error></btu-tab>
+      </btu-tabs>
+      <btu-tabs size="md" variant="menu" active-tab="main">
+        <btu-tab name="main" label="Main" error></btu-tab>
+        <btu-tab name="seo" label="SEO"></btu-tab>
+        <btu-tab name="overrides" label="Overrides"></btu-tab>
+        <btu-tab name="styles" label="Styles" error></btu-tab>
+      </btu-tabs>
+    </div>
+  `,parameters:{docs:{description:{story:"Set `error` to show a badge indicating the tab content has validation errors. When the tab is active, the indicator underline also turns red. In `menu` variant, the error badge appears next to the active tab label and on items in the dropdown."}}}},l={render:()=>e`
+    <div class="flex flex-col gap-8">
+      <btu-tabs size="md" active-tab="main">
+        <btu-tab name="main" label="Main"></btu-tab>
+        <btu-tab name="seo" label="SEO"></btu-tab>
+        <btu-tab name="overrides" label="Overrides" disabled></btu-tab>
+        <btu-tab name="styles" label="Styles"></btu-tab>
+        <btu-tab name="api" label="API" disabled></btu-tab>
+      </btu-tabs>
+      <btu-tabs size="md" variant="menu" active-tab="main">
+        <btu-tab name="main" label="Main"></btu-tab>
+        <btu-tab name="seo" label="SEO"></btu-tab>
+        <btu-tab name="overrides" label="Overrides" disabled></btu-tab>
+        <btu-tab name="styles" label="Styles"></btu-tab>
+        <btu-tab name="api" label="API" disabled></btu-tab>
+      </btu-tabs>
+    </div>
+  `,parameters:{docs:{description:{story:"Set `disabled` to make a tab non-interactive. Disabled tabs remain focusable for keyboard navigation but cannot be activated."}}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...b.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="flex flex-col gap-8">
+      <btu-tabs size="md" active-tab="dashboard">
+        <btu-tab name="dashboard" label="Dashboard" symbol="layout-dashboard"></btu-tab>
+        <btu-tab name="search" label="Search" symbol="search"></btu-tab>
+        <btu-tab name="settings" label="Settings" symbol="settings" icon-position="trailing"></btu-tab>
+      </btu-tabs>
+      <btu-tabs size="md" variant="menu" active-tab="dashboard">
+        <btu-tab name="dashboard" label="Dashboard" symbol="layout-dashboard"></btu-tab>
+        <btu-tab name="search" label="Search" symbol="search"></btu-tab>
+        <btu-tab name="settings" label="Settings" symbol="settings" icon-position="trailing"></btu-tab>
+      </btu-tabs>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set \`symbol\` to any Lucide icon name. Use \`icon-position\` to place the icon before (default) or after the label.'
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-tabs size="md" active-tab="dashboard">
+      <btu-tab name="dashboard" label="Dashboard" symbol="layout-dashboard" icon-only></btu-tab>
+      <btu-tab name="search" label="Search" symbol="search" icon-only></btu-tab>
+      <btu-tab name="settings" label="Settings" symbol="settings" icon-only></btu-tab>
+      <btu-tab name="help" label="Help" symbol="circle-help" icon-only></btu-tab>
+    </btu-tabs>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set \`icon-only\` to visually hide the label while keeping it accessible via \`aria-label\`. Intended for use with \`variant="full"\` only — the \`menu\` variant always shows the label text.'
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-tabs size="md" active-tab="inbox">
+      <btu-tab name="inbox" label="Inbox" badge="12"></btu-tab>
+      <btu-tab name="drafts" label="Drafts" badge="3"></btu-tab>
+      <btu-tab name="sent" label="Sent"></btu-tab>
+      <btu-tab name="spam" label="Spam" badge="99+"></btu-tab>
+      <btu-tab
+        name="primary"
+        label="Primary"
+        badge="5"
+        style=\${styleMap({
+    '--badge-color-background': 'oklch(var(--btu-theme-primary-50))',
+    '--badge-color-foreground': 'oklch(var(--btu-theme-primary-700))'
+  })}
+      ></btu-tab>
+      <btu-tab
+        name="error"
+        label="Error"
+        badge="2"
+        style=\${styleMap({
+    '--badge-color-background': 'oklch(var(--btu-theme-error-50))',
+    '--badge-color-foreground': 'oklch(var(--btu-theme-error-700))'
+  })}
+      ></btu-tab>
+    </btu-tabs>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set \`badge\` to display a numeric or text badge alongside the label. Defaults to a gray badge (gray-50 background, gray-700 text). Use \`--badge-color-background\` and \`--badge-color-foreground\` to customize — inline on a specific \`btu-tab\` to scope it, or on \`btu-tabs\` to apply to all. Intended for use with \`variant="full"\` only.'
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="flex flex-col gap-8">
+      <btu-tabs size="md" active-tab="main">
+        <btu-tab name="main" label="Main" error></btu-tab>
+        <btu-tab name="seo" label="SEO"></btu-tab>
+        <btu-tab name="overrides" label="Overrides"></btu-tab>
+        <btu-tab name="styles" label="Styles" error></btu-tab>
+      </btu-tabs>
+      <btu-tabs size="md" variant="menu" active-tab="main">
+        <btu-tab name="main" label="Main" error></btu-tab>
+        <btu-tab name="seo" label="SEO"></btu-tab>
+        <btu-tab name="overrides" label="Overrides"></btu-tab>
+        <btu-tab name="styles" label="Styles" error></btu-tab>
+      </btu-tabs>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set \`error\` to show a badge indicating the tab content has validation errors. When the tab is active, the indicator underline also turns red. In \`menu\` variant, the error badge appears next to the active tab label and on items in the dropdown.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="flex flex-col gap-8">
+      <btu-tabs size="md" active-tab="main">
+        <btu-tab name="main" label="Main"></btu-tab>
+        <btu-tab name="seo" label="SEO"></btu-tab>
+        <btu-tab name="overrides" label="Overrides" disabled></btu-tab>
+        <btu-tab name="styles" label="Styles"></btu-tab>
+        <btu-tab name="api" label="API" disabled></btu-tab>
+      </btu-tabs>
+      <btu-tabs size="md" variant="menu" active-tab="main">
+        <btu-tab name="main" label="Main"></btu-tab>
+        <btu-tab name="seo" label="SEO"></btu-tab>
+        <btu-tab name="overrides" label="Overrides" disabled></btu-tab>
+        <btu-tab name="styles" label="Styles"></btu-tab>
+        <btu-tab name="api" label="API" disabled></btu-tab>
+      </btu-tabs>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set \`disabled\` to make a tab non-interactive. Disabled tabs remain focusable for keyboard navigation but cannot be activated.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};const v=["Default","WithIcon","IconOnly","WithBadge","WithError","Disabled"];export{b as Default,l as Disabled,o as IconOnly,r as WithBadge,s as WithError,n as WithIcon,v as __namedExportsOrder,y as default};