@brightspot/ui 1.9.0 → 1.11.0

package/dist/storybook/assets/Switch.stories-Cf8WM1LG.js

@@ -0,0 +1,312 @@
+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>
+  <li>When the effect of the change is immediate or near-immediate</li>
+  <li>As an alternative to a single checkbox for boolean options</li>
+</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`
+    <btu-switch
+      size=${e.size??"small"}
+      label=${s(e.label)}
+      description=${s(e.description)}
+      label-position=${e["label-position"]??"end"}
+      on-icon=${s(e["on-icon"])}
+      off-icon=${s(e["off-icon"])}
+      name=${s(e.name)}
+      .checked=${e.checked??!1}
+      ?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`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      ${["small","medium","large"].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`
+    <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> `)}
+    </div>
+  `,parameters:{docs:{description:{story:"The three available size variants: `small` (default), `medium`, and `large`."}}}},p={render:()=>c`
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-2">
+        <strong>Custom colors:</strong>
+        <div class="flex items-center gap-6">
+          <btu-switch
+            label="Success"
+            checked
+            style=${f({"--switch-color-track-on":"oklch(var(--btu-theme-success-600))"})}
+          ></btu-switch>
+          <btu-switch
+            label="Warning"
+            checked
+            style=${f({"--switch-color-track-on":"oklch(var(--btu-theme-warning-500))"})}
+          ></btu-switch>
+          <btu-switch
+            label="Error"
+            checked
+            style=${f({"--switch-color-track-on":"oklch(var(--btu-theme-error-600))"})}
+          ></btu-switch>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Event handling:</strong>
+        <btu-switch
+          label="Toggle me"
+          description="Check the Actions panel to see events"
+          @btu-switch-change=${e=>{const t=e.target.querySelector(".btu-switch-description");t&&(t.textContent=e.detail.checked?"Switch is ON":"Switch is OFF")}}
+        ></btu-switch>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Form participation:</strong>
+        <form
+          class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4"
+          @submit=${e=>{e.preventDefault();const o=e.target,t=new FormData(o),n=o.querySelector(".form-output");n&&(n.textContent=JSON.stringify(Object.fromEntries(t),null,2))}}
+        >
+          <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>
+          <pre class="form-output text-xs text-gray-600"></pre>
+        </form>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Track icons:</strong>
+        <div class="flex items-center gap-6">
+          <btu-switch label="Check / X" on-icon="check" off-icon="x" checked></btu-switch>
+          <btu-switch label="Lock" on-icon="lock-open" off-icon="lock"></btu-switch>
+          <btu-switch label="Sound" on-icon="volume-2" off-icon="volume-off" checked></btu-switch>
+        </div>
+      </div>
+
+      <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>
+          <button
+            class="btu-button btu-button-sm"
+            @click=${()=>{const e=document.getElementById("programmatic-switch");e&&(e.checked=!e.checked)}}
+          >
+            Toggle externally
+          </button>
+        </div>
+      </div>
+    </div>
+  `,parameters:{docs:{description:{story:"\n- **Custom colors** via CSS custom properties (`--switch-color-track-on`, `--switch-color-track-off`) using theme tokens.\n- **Event handling** with the `btu-switch-change` event, which provides `{ checked: boolean }` in its detail.\n- **Form participation** using the `name` attribute — the hidden checkbox participates in native form submission.\n- **Track icons** via `on-icon` and `off-icon` attributes using Lucide icon names (e.g., `check`, `x`, `lock`, `volume-2`).\n- **Programmatic control** by setting the `checked` property directly from JavaScript."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...i.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {
+    checked: true,
+    label: 'Enabled'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Switch in the checked/on state. The track uses \`--switch-color-track-on\` (defaults to primary-700).'
+      }
+    }
+  }
+}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Enable notifications',
+    description: 'Receive updates via email',
+    checked: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Switch with both a primary label and a secondary description.'
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Unavailable option',
+    disabled: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled state via the \`disabled\` attribute. The track opacity is reduced and the wrapper cursor changes to \`not-allowed\`.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Previously enabled',
+    disabled: true,
+    checked: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled switch in the checked state. Useful for showing a locked-on setting.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Label on the left',
+    'label-position': 'start'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Place the label before the switch using \`label-position="start"\`.'
+      }
+    }
+  }
+}`,...h.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Notifications',
+    checked: true,
+    '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\`).'
+      }
+    }
+  }
+}`,...u.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} with icons" on-icon="check" off-icon="x" checked></btu-switch>
+        \`)}
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Track icons scale automatically with the switch size.'
+      }
+    }
+  }
+}`,...m.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\` <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\`.'
+      }
+    }
+  }
+}`,...b.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">
+        <strong>Custom colors:</strong>
+        <div class="flex items-center gap-6">
+          <btu-switch
+            label="Success"
+            checked
+            style=\${styleMap({
+    '--switch-color-track-on': 'oklch(var(--btu-theme-success-600))'
+  })}
+          ></btu-switch>
+          <btu-switch
+            label="Warning"
+            checked
+            style=\${styleMap({
+    '--switch-color-track-on': 'oklch(var(--btu-theme-warning-500))'
+  })}
+          ></btu-switch>
+          <btu-switch
+            label="Error"
+            checked
+            style=\${styleMap({
+    '--switch-color-track-on': 'oklch(var(--btu-theme-error-600))'
+  })}
+          ></btu-switch>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Event handling:</strong>
+        <btu-switch
+          label="Toggle me"
+          description="Check the Actions panel to see events"
+          @btu-switch-change=\${(e: CustomEvent<{
+    checked: boolean;
+  }>) => {
+    const el = e.target as HTMLElement;
+    const label = el.querySelector('.btu-switch-description');
+    if (label) label.textContent = e.detail.checked ? 'Switch is ON' : 'Switch is OFF';
+  }}
+        ></btu-switch>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Form participation:</strong>
+        <form
+          class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4"
+          @submit=\${(e: Event) => {
+    e.preventDefault();
+    const form = e.target as HTMLFormElement;
+    const data = new FormData(form);
+    const output = form.querySelector('.form-output');
+    if (output) output.textContent = JSON.stringify(Object.fromEntries(data), null, 2);
+  }}
+        >
+          <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>
+          <pre class="form-output text-xs text-gray-600"></pre>
+        </form>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Track icons:</strong>
+        <div class="flex items-center gap-6">
+          <btu-switch label="Check / X" on-icon="check" off-icon="x" checked></btu-switch>
+          <btu-switch label="Lock" on-icon="lock-open" off-icon="lock"></btu-switch>
+          <btu-switch label="Sound" on-icon="volume-2" off-icon="volume-off" checked></btu-switch>
+        </div>
+      </div>
+
+      <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>
+          <button
+            class="btu-button btu-button-sm"
+            @click=\${() => {
+    const sw = document.getElementById('programmatic-switch') as HTMLElement & {
+      checked: boolean;
+    };
+    if (sw) sw.checked = !sw.checked;
+  }}
+          >
+            Toggle externally
+          </button>
+        </div>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`
+- **Custom colors** via CSS custom properties (\\\`--switch-color-track-on\\\`, \\\`--switch-color-track-off\\\`) using theme tokens.
+- **Event handling** with the \\\`btu-switch-change\\\` event, which provides \\\`{ checked: boolean }\\\` in its detail.
+- **Form participation** using the \\\`name\\\` attribute — the hidden checkbox participates in native form submission.
+- **Track icons** via \\\`on-icon\\\` and \\\`off-icon\\\` attributes using Lucide icon names (e.g., \\\`check\\\`, \\\`x\\\`, \\\`lock\\\`, \\\`volume-2\\\`).
+- **Programmatic control** by setting the \\\`checked\\\` property directly from JavaScript.\`
+      }
+    }
+  }
+}`,...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};

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};