import{g as u,x as e}from"./iframe-CMPv_g6-.js";import{o as d}from"./style-map-968Ye5qo.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};
