import{g as b,E as i,x as s}from"./iframe-CMPv_g6-.js";import{o as c}from"./style-map-968Ye5qo.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:u,argTypes:a}=b("btu-tabs"),h={title:"Components/Tabs",component:"btu-tabs",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tabs",description:{component:`
A tab group component that manages selection state across a set of \`btu-tab\` children.

<h3>When to use:</h3>
<ul>
  <li>To organize related content into separate panels</li>
  <li>When users need to switch between views without leaving the page</li>
</ul>

<h3>Use Cases in the CMS:</h3>
<ul>
  <li>On content edit pages (Main, SEO, Styles, etc.)</li>
</ul>

<h3>Keyboard Navigation:</h3>
<ul>
  <li><strong>Arrow Right / Arrow Left</strong> — Move focus between tabs</li>
  <li><strong>Home / End</strong> — Jump to first / last tab</li>
  <li><strong>Enter / Space</strong> — Activate the focused tab</li>
</ul>
        `}},actions:{handles:d},controls:{expanded:!0}},args:{...u,size:"md"},argTypes:{...a,"--tabs-active-color":{table:{disable:!0}},"--tabs-active-indicator-color":{table:{disable:!0}},"--tabs-border-color":{table:{disable:!0}},"--tabs-color":{table:{disable:!0}},"--tabs-background":{table:{disable:!0}},"--tabs-container-background":{table:{disable:!0}},"--tabs-hover-background":{table:{disable:!0}},"--tabs-hover-color":{table:{disable:!0}},"--tabs-gap":{table:{disable:!0}},size:{...a.size,control:{type:"select"},options:["xs","sm","md","lg"]},variant:{...a.variant,control:{type:"select"},options:["full","menu"],description:"`full` — tabs scroll horizontally when they overflow (default). `menu` — all tabs are hidden; the active tab label and a chevron dropdown are shown instead."},activeTab:{table:{disable:!0}},"active-tab":{...a["active-tab"],control:{type:"text"},description:"The name of the currently active tab. Defaults to the first non-disabled tab if not set.",table:{type:{summary:"string"}}},customActiveColor:{name:"--tabs-active-color",control:{type:"color"},description:"Text and icon color of the active tab (default: gray-700)",table:{category:"css properties"}},customActiveIndicatorColor:{name:"--tabs-active-indicator-color",control:{type:"color"},description:"Color of the active tab underline indicator (default: primary gradient)",table:{category:"css properties"}},customBorderColor:{name:"--tabs-border-color",control:{type:"color"},description:"Color of the bottom border divider (default: gray-200)",table:{category:"css properties"}},customColor:{name:"--tabs-color",control:{type:"color"},description:"Text and icon color for all tabs (default: gray-500)",table:{category:"css properties"}},customBackground:{name:"--tabs-background",control:{type:"color"},description:"Background color for all tab buttons (default: transparent)",table:{category:"css properties"}},customContainerBackground:{name:"--tabs-container-background",control:{type:"color"},description:"Background color of the tabs container (default: theme white)",table:{category:"css properties"}},customHoverBackground:{name:"--tabs-hover-background",control:{type:"color"},description:"Background color of a tab on hover (default: gray-100)",table:{category:"css properties"}},customHoverColor:{name:"--tabs-hover-color",control:{type:"color"},description:"Text and icon color of a tab on hover (default: gray-700)",table:{category:"css properties"}},customGap:{name:"--tabs-gap",control:{type:"text"},description:"Spacing between tabs (default: 1rem)",table:{category:"css properties"}}},render:t=>{const e={};return t.customActiveColor&&(e["--tabs-active-color"]=t.customActiveColor),t.customActiveIndicatorColor&&(e["--tabs-active-indicator-color"]=t.customActiveIndicatorColor),t.customBorderColor&&(e["--tabs-border-color"]=t.customBorderColor),t.customColor&&(e["--tabs-color"]=t.customColor),t.customBackground&&(e["--tabs-background"]=t.customBackground),t.customContainerBackground&&(e["--tabs-container-background"]=t.customContainerBackground),t.customHoverBackground&&(e["--tabs-hover-background"]=t.customHoverBackground),t.customHoverColor&&(e["--tabs-hover-color"]=t.customHoverColor),t.customGap&&(e["--tabs-gap"]=t.customGap),s`
      <btu-tabs
        size="${t.size}"
        variant="${t.variant}"
        active-tab="${t["active-tab"]||i}"
        style=${c(e)}
      >
        <btu-tab name="main" label="Main"></btu-tab>
        <btu-tab name="seo" label="SEO"></btu-tab>
        <btu-tab name="overrides" label="Overrides"></btu-tab>
        <btu-tab name="styles" label="Styles"></btu-tab>
        <btu-tab name="translations" label="Translations"></btu-tab>
        <btu-tab name="analytics" label="Analytics"></btu-tab>
        <btu-tab name="integrations" label="Integrations"></btu-tab>
        <btu-tab name="api" label="API"></btu-tab>
      </btu-tabs>
    `}},n={args:{}},o={render:()=>s`
    <div>
      <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"></btu-tab>
      </btu-tabs>
      <div name="main" role="tabpanel" class="flex flex-col gap-4 p-6">
        <div class="flex flex-col gap-1">
          <label class="text-sm font-medium text-gray-700">Headline</label>
          <input class="rounded border border-gray-300 px-3 py-2 text-sm" placeholder="Enter headline..." />
        </div>
        <div class="flex flex-col gap-1">
          <label class="text-sm font-medium text-gray-700">Body</label>
          <textarea
            class="h-32 rounded border border-gray-300 px-3 py-2 text-sm"
            placeholder="Enter body text..."
          ></textarea>
        </div>
      </div>
      <div name="seo" role="tabpanel" class="flex flex-col gap-4 p-6">
        <div class="flex flex-col gap-1">
          <label class="text-sm font-medium text-gray-700">SEO Title</label>
          <input class="rounded border border-gray-300 px-3 py-2 text-sm" placeholder="Enter SEO title..." />
        </div>
        <div class="flex flex-col gap-1">
          <label class="text-sm font-medium text-gray-700">Meta Description</label>
          <textarea
            class="h-24 rounded border border-gray-300 px-3 py-2 text-sm"
            placeholder="Enter meta description..."
          ></textarea>
        </div>
      </div>
      <div name="overrides" role="tabpanel" class="flex flex-col gap-4 p-6">
        <div class="flex flex-col gap-1">
          <label class="text-sm font-medium text-gray-700">Override URL</label>
          <input class="rounded border border-gray-300 px-3 py-2 text-sm" placeholder="/custom-url" />
        </div>
      </div>
    </div>
  `,parameters:{docs:{description:{story:'\nEach `btu-tab` has a `name` attribute. Direct siblings of `btu-tabs` that share the same `name` value are automatically shown when that tab is active — no event listener needed. Siblings with a non-matching `name` are hidden. Multiple siblings can share the same `name` value and all will be shown together. Only direct siblings are managed, so nested tab groups control their own panels independently.\n\nEach content panel should have `role="tabpanel"` for accessibility.\n\n```html\n<div>\n  <btu-tabs active-tab="main">\n    <btu-tab name="main" label="Main"></btu-tab>\n    <btu-tab name="seo"  label="SEO"></btu-tab>\n  </btu-tabs>\n  <div name="main" role="tabpanel">...</div>\n  <div name="seo"  role="tabpanel">...</div>\n</div>\n```\n        '}}}},l={name:"Full Variant",render:()=>s`
    <div
      style="width: 420px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem; padding: 0.5rem;"
    >
      <btu-tabs size="md" variant="full" 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"></btu-tab>
        <btu-tab name="styles" label="Styles"></btu-tab>
        <btu-tab name="translations" label="Translations"></btu-tab>
        <btu-tab name="analytics" label="Analytics"></btu-tab>
        <btu-tab name="integrations" label="Integrations"></btu-tab>
        <btu-tab name="api" label="API"></btu-tab>
      </btu-tabs>
    </div>
  `,parameters:{docs:{description:{story:'The default `variant="full"` scrolls horizontally when tabs overflow. Drag the resize handle on the container to see tabs scroll.'}}}},r={name:"Menu Variant",render:()=>s`
    <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"></btu-tab>
      <btu-tab name="styles" label="Styles"></btu-tab>
      <btu-tab name="translations" label="Translations"></btu-tab>
      <btu-tab name="analytics" label="Analytics"></btu-tab>
    </btu-tabs>
  `,parameters:{docs:{description:{story:'Set `variant="menu"` to replace the tab strip with a compact layout showing the active tab label and a dropdown listing all tabs. Useful for narrow containers or mobile contexts where showing all tabs is impractical.'}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
  args: {}
}`,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div>
      <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"></btu-tab>
      </btu-tabs>
      <div name="main" role="tabpanel" class="flex flex-col gap-4 p-6">
        <div class="flex flex-col gap-1">
          <label class="text-sm font-medium text-gray-700">Headline</label>
          <input class="rounded border border-gray-300 px-3 py-2 text-sm" placeholder="Enter headline..." />
        </div>
        <div class="flex flex-col gap-1">
          <label class="text-sm font-medium text-gray-700">Body</label>
          <textarea
            class="h-32 rounded border border-gray-300 px-3 py-2 text-sm"
            placeholder="Enter body text..."
          ></textarea>
        </div>
      </div>
      <div name="seo" role="tabpanel" class="flex flex-col gap-4 p-6">
        <div class="flex flex-col gap-1">
          <label class="text-sm font-medium text-gray-700">SEO Title</label>
          <input class="rounded border border-gray-300 px-3 py-2 text-sm" placeholder="Enter SEO title..." />
        </div>
        <div class="flex flex-col gap-1">
          <label class="text-sm font-medium text-gray-700">Meta Description</label>
          <textarea
            class="h-24 rounded border border-gray-300 px-3 py-2 text-sm"
            placeholder="Enter meta description..."
          ></textarea>
        </div>
      </div>
      <div name="overrides" role="tabpanel" class="flex flex-col gap-4 p-6">
        <div class="flex flex-col gap-1">
          <label class="text-sm font-medium text-gray-700">Override URL</label>
          <input class="rounded border border-gray-300 px-3 py-2 text-sm" placeholder="/custom-url" />
        </div>
      </div>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: \`
Each \\\`btu-tab\\\` has a \\\`name\\\` attribute. Direct siblings of \\\`btu-tabs\\\` that share the same \\\`name\\\` value are automatically shown when that tab is active — no event listener needed. Siblings with a non-matching \\\`name\\\` are hidden. Multiple siblings can share the same \\\`name\\\` value and all will be shown together. Only direct siblings are managed, so nested tab groups control their own panels independently.

Each content panel should have \\\`role="tabpanel"\\\` for accessibility.

\\\`\\\`\\\`html
<div>
  <btu-tabs active-tab="main">
    <btu-tab name="main" label="Main"></btu-tab>
    <btu-tab name="seo"  label="SEO"></btu-tab>
  </btu-tabs>
  <div name="main" role="tabpanel">...</div>
  <div name="seo"  role="tabpanel">...</div>
</div>
\\\`\\\`\\\`
        \`
      }
    }
  }
}`,...o.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
  name: 'Full Variant',
  render: () => html\`
    <div
      style="width: 420px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem; padding: 0.5rem;"
    >
      <btu-tabs size="md" variant="full" 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"></btu-tab>
        <btu-tab name="styles" label="Styles"></btu-tab>
        <btu-tab name="translations" label="Translations"></btu-tab>
        <btu-tab name="analytics" label="Analytics"></btu-tab>
        <btu-tab name="integrations" label="Integrations"></btu-tab>
        <btu-tab name="api" label="API"></btu-tab>
      </btu-tabs>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'The default \`variant="full"\` scrolls horizontally when tabs overflow. Drag the resize handle on the container to see tabs scroll.'
      }
    }
  }
}`,...l.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
  name: 'Menu Variant',
  render: () => html\`
    <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"></btu-tab>
      <btu-tab name="styles" label="Styles"></btu-tab>
      <btu-tab name="translations" label="Translations"></btu-tab>
      <btu-tab name="analytics" label="Analytics"></btu-tab>
    </btu-tabs>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Set \`variant="menu"\` to replace the tab strip with a compact layout showing the active tab label and a dropdown listing all tabs. Useful for narrow containers or mobile contexts where showing all tabs is impractical.'
      }
    }
  }
}`,...r.parameters?.docs?.source}}};const g=["Default","WithContent","FullVariant","MenuVariant"];export{n as Default,l as FullVariant,r as MenuVariant,o as WithContent,g as __namedExportsOrder,h as default};
