@brightspot/ui 1.10.0 → 1.11.0

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-BVJc1vCA.js → Rtc.stories-Ve7Bwo_l.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-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};

package/dist/storybook/assets/{Switch.stories-BEEHP8mD.js → Switch.stories-Cf8WM1LG.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-DloIUNZz.js";import{o as s}from"./if-defined-B1RdczOE.js";import{o as f}from"./style-map-DLXysq3r.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-CEtdEtOx.js

@@ -0,0 +1,218 @@
+import{g as c,x as t}from"./iframe-DloIUNZz.js";import{o as d}from"./style-map-DLXysq3r.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:m,argTypes:e}=c("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:u},controls:{expanded:!0}},args:{...m,label:"Main",name:"main","icon-name":"",badge:void 0},argTypes:{...e,size:{table:{disable:!0}},"--badge-color-background":{table:{disable:!0}},"--badge-color-foreground":{table:{disable:!0}},label:{...e.label,control:{type:"text"},description:"Text displayed in the tab."},description:{...e.description,control:{type:"text"},description:"Accessibility description for screen readers (`aria-description`)."},disabled:{...e.disabled,control:{type:"boolean"},description:"Whether the tab is disabled and non-interactive."},"icon-name":{...e["icon-name"],control:{type:"text"},description:"Lucide icon name to display."},"icon-position":{...e["icon-position"],control:{type:"select"},options:["leading","trailing"],description:"Placement of the icon relative to the label."},"icon-only":{...e["icon-only"],control:{type:"boolean"},description:'When true, hides the label visually while maintaining accessibility. Intended for use with `variant="full"` only.'},error:{...e.error,control:{type:"boolean"},description:"When true, displays an error badge on the tab."},badge:{...e.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 l={};return a.customBadgeBackground&&(l["--badge-color-background"]=a.customBadgeBackground),a.customBadgeForeground&&(l["--badge-color-foreground"]=a.customBadgeForeground),t`
+      <btu-tabs size="md" active-tab="main" style=${d(l)}>
+        <btu-tab
+          name="main"
+          label="${a.label}"
+          ?disabled="${a.disabled}"
+          .iconName="${a["icon-name"]||""}"
+          .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:()=>t`
+    <div class="flex flex-col gap-8">
+      <btu-tabs size="md" active-tab="dashboard">
+        <btu-tab name="dashboard" label="Dashboard" icon-name="layout-dashboard"></btu-tab>
+        <btu-tab name="search" label="Search" icon-name="search"></btu-tab>
+        <btu-tab name="settings" label="Settings" icon-name="settings" icon-position="trailing"></btu-tab>
+      </btu-tabs>
+      <btu-tabs size="md" variant="menu" active-tab="dashboard">
+        <btu-tab name="dashboard" label="Dashboard" icon-name="layout-dashboard"></btu-tab>
+        <btu-tab name="search" label="Search" icon-name="search"></btu-tab>
+        <btu-tab name="settings" label="Settings" icon-name="settings" icon-position="trailing"></btu-tab>
+      </btu-tabs>
+    </div>
+  `,parameters:{docs:{description:{story:"Set `icon-name` to any Lucide icon name. Use `icon-position` to place the icon before (default) or after the label."}}}},o={render:()=>t`
+    <btu-tabs size="md" active-tab="dashboard">
+      <btu-tab name="dashboard" label="Dashboard" icon-name="layout-dashboard" icon-only></btu-tab>
+      <btu-tab name="search" label="Search" icon-name="search" icon-only></btu-tab>
+      <btu-tab name="settings" label="Settings" icon-name="settings" icon-only></btu-tab>
+      <btu-tab name="help" label="Help" icon-name="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:()=>t`
+    <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.'}}}},i={render:()=>t`
+    <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={render:()=>t`
+    <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" icon-name="layout-dashboard"></btu-tab>
+        <btu-tab name="search" label="Search" icon-name="search"></btu-tab>
+        <btu-tab name="settings" label="Settings" icon-name="settings" icon-position="trailing"></btu-tab>
+      </btu-tabs>
+      <btu-tabs size="md" variant="menu" active-tab="dashboard">
+        <btu-tab name="dashboard" label="Dashboard" icon-name="layout-dashboard"></btu-tab>
+        <btu-tab name="search" label="Search" icon-name="search"></btu-tab>
+        <btu-tab name="settings" label="Settings" icon-name="settings" icon-position="trailing"></btu-tab>
+      </btu-tabs>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set \`icon-name\` 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" icon-name="layout-dashboard" icon-only></btu-tab>
+      <btu-tab name="search" label="Search" icon-name="search" icon-only></btu-tab>
+      <btu-tab name="settings" label="Settings" icon-name="settings" icon-only></btu-tab>
+      <btu-tab name="help" label="Help" icon-name="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}}};i.parameters={...i.parameters,docs:{...i.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.'
+      }
+    }
+  }
+}`,...i.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"></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.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};const v=["Default","WithIcon","IconOnly","WithBadge","WithError","Disabled"];export{b as Default,s as Disabled,o as IconOnly,r as WithBadge,i as WithError,n as WithIcon,v as __namedExportsOrder,y as default};