import{g as k,x as e}from"./iframe-CMPv_g6-.js";import{o}from"./style-map-968Ye5qo.js";import"./preload-helper-PPVm8Dsz.js";const{events:w,args:f,argTypes:n}=k("btu-button-group");function u(t){const a={};return t.customGap&&(a["--button-group-gap"]=t.customGap),t.customBorderRadius&&(a["--button-group-border-radius"]=t.customBorderRadius),t.customBorderColor&&(a["--button-group-border-color"]=t.customBorderColor),a}const z={title:"Components/Button Group",component:"btu-button-group",tags:["autodocs"],parameters:{docs:{subtitle:"btu-button-group",description:{component:`
A semantic container for grouping related buttons together.

<h3>When to use:</h3>
<ul>
  <li>To visually and semantically group related buttons (e.g., text formatting, alignment)</li>
  <li>To create toggle/selection groups (single-select or multi-select)</li>
  <li>In toolbars, filter bars, and action clusters</li>
</ul>

<h3>Variants:</h3>
<ul>
  <li><strong>connected</strong> — Buttons are joined with collapsed borders</li>
  <li><strong>spaced</strong> — Buttons have a gap between them</li>
</ul>

<h3>Keyboard Navigation (selection modes):</h3>
<ul>
  <li><strong>Single select:</strong> Arrow keys move focus and immediately activate the focused button</li>
  <li><strong>Multiple select:</strong> Arrow keys move focus only; Space/Enter toggles the focused button</li>
  <li><strong>Home / End</strong> — Jump to first / last button</li>
  <li><strong>Tab</strong> — Enter and exit the group</li>
</ul>
        `}},actions:{handles:w},controls:{expanded:!0}},args:{...f,label:"Actions",orientation:"horizontal",variant:"connected",size:"md",disabled:!1,selection:"none",value:""},argTypes:{...n,"--button-group-gap":{table:{disable:!0}},"--button-group-border-radius":{table:{disable:!0}},"--button-group-border-color":{table:{disable:!0}},size:{...n.size,control:{type:"select"},options:["sm","md","lg"]},orientation:{...n.orientation,control:{type:"select"},options:["horizontal","vertical"]},variant:{...n.variant,control:{type:"select"},options:["connected","spaced"]},selection:{...n.selection,control:{type:"select"},options:["none","single","multiple"]},customGap:{name:"--button-group-gap",control:{type:"text"},description:'Space between buttons when variant="spaced"',table:{category:"css properties",defaultValue:{summary:"spacing.sm"}}},customBorderRadius:{name:"--button-group-border-radius",control:{type:"text"},description:'Corner radius of outer edges when variant="connected"',table:{category:"css properties"}},customBorderColor:{name:"--button-group-border-color",control:{type:"color"},description:"Internal divider color between connected buttons",table:{category:"css properties"}}},render:t=>e`
    <btu-button-group
      label=${t.label}
      orientation=${t.orientation}
      variant=${t.variant}
      size=${t.size}
      ?disabled=${t.disabled}
      selection=${t.selection}
      value=${t.value}
      style=${o(u(t))}
    >
      <button class="btu-button btu-button-outline btu-button-gray" value="cut">Cut</button>
      <button class="btu-button btu-button-outline btu-button-gray" value="copy">Copy</button>
      <button class="btu-button btu-button-outline btu-button-gray" value="paste">Paste</button>
    </btu-button-group>
  `},r={},b={args:{variant:"spaced"},parameters:{docs:{description:{story:"Buttons rendered with a gap between them instead of joined borders."}}}},l={args:{orientation:"vertical"},parameters:{docs:{description:{story:"Vertical layout with connected (joined) buttons."}}}},s={args:{orientation:"vertical",variant:"spaced"},parameters:{docs:{description:{story:"Vertical layout with spaced buttons."}}}},i={render:()=>e`
    <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
      <btu-button-group label="Small actions" size="sm">
        <button class="btu-button btu-button-outline btu-button-gray" value="cut">Cut</button>
        <button class="btu-button btu-button-outline btu-button-gray" value="copy">Copy</button>
        <button class="btu-button btu-button-outline btu-button-gray" value="paste">Paste</button>
      </btu-button-group>
      <btu-button-group label="Medium actions" size="md">
        <button class="btu-button btu-button-outline btu-button-gray" value="cut">Cut</button>
        <button class="btu-button btu-button-outline btu-button-gray" value="copy">Copy</button>
        <button class="btu-button btu-button-outline btu-button-gray" value="paste">Paste</button>
      </btu-button-group>
      <btu-button-group label="Large actions" size="lg">
        <button class="btu-button btu-button-outline btu-button-gray" value="cut">Cut</button>
        <button class="btu-button btu-button-outline btu-button-gray" value="copy">Copy</button>
        <button class="btu-button btu-button-outline btu-button-gray" value="paste">Paste</button>
      </btu-button-group>
    </div>
  `,parameters:{docs:{description:{story:"The group propagates its `size` to all child buttons. `sm`, `md`, and `lg` shown."}}}},c={args:{disabled:!0},parameters:{docs:{description:{story:'Setting `disabled` on the group disables all child buttons and sets `aria-disabled="true"`.'}}}},d={args:{label:"Text alignment",selection:"single",value:"center"},render:t=>e`
    <btu-button-group
      label=${t.label}
      selection=${t.selection}
      value=${t.value}
      variant=${t.variant}
      size=${t.size}
      ?disabled=${t.disabled}
      style=${o(u(t))}
    >
      <button class="btu-button btu-button-outline btu-button-gray" value="left">Left</button>
      <button class="btu-button btu-button-outline btu-button-gray" value="center">Center</button>
      <button class="btu-button btu-button-outline btu-button-gray" value="right">Right</button>
      <button class="btu-button btu-button-outline btu-button-gray" value="justify">Justify</button>
    </btu-button-group>
  `,parameters:{docs:{description:{story:"Single selection mode — one button active at a time. Click the active button to deselect. Arrow keys move and activate."}}}},p={args:{label:"Text formatting",selection:"multiple",value:"bold,italic"},render:t=>e`
    <btu-button-group
      label=${t.label}
      selection=${t.selection}
      value=${t.value}
      variant=${t.variant}
      size=${t.size}
      ?disabled=${t.disabled}
      style=${o(u(t))}
    >
      <button class="btu-button btu-button-outline btu-button-gray" value="bold"><strong>B</strong></button>
      <button class="btu-button btu-button-outline btu-button-gray" value="italic"><em>I</em></button>
      <button class="btu-button btu-button-outline btu-button-gray" value="underline"><u>U</u></button>
      <button class="btu-button btu-button-outline btu-button-gray" value="strikethrough"><s>S</s></button>
    </btu-button-group>
  `,parameters:{docs:{description:{story:"Multiple selection mode — any number of buttons can be active simultaneously. Arrow keys move focus, Space/Enter toggles."}}}},g={args:{label:"View mode",selection:"single",value:"grid"},render:t=>e`
    <btu-button-group
      label=${t.label}
      selection=${t.selection}
      value=${t.value}
      variant=${t.variant}
      size=${t.size}
      style=${o(u(t))}
    >
      <button class="btu-button btu-button-outline btu-button-gray" value="list">List</button>
      <button class="btu-button btu-button-outline btu-button-gray" value="grid">Grid</button>
      <button class="btu-button btu-button-outline btu-button-gray" value="table">Table</button>
    </btu-button-group>
  `,parameters:{docs:{description:{story:"The `value` attribute can be set declaratively in HTML to pre-select a button on first render."}}}},y={args:{label:"Toolbar",selection:"multiple",value:""},render:t=>e`
    <btu-button-group
      label=${t.label}
      selection=${t.selection}
      value=${t.value}
      variant=${t.variant}
      size=${t.size}
      style=${o(u(t))}
    >
      <btu-icon-button symbol="bold" type="secondary-stroke" value="bold" aria-label="Bold"></btu-icon-button>
      <btu-icon-button symbol="italic" type="secondary-stroke" value="italic" aria-label="Italic"></btu-icon-button>
      <btu-icon-button
        symbol="underline"
        type="secondary-stroke"
        value="underline"
        aria-label="Underline"
      ></btu-icon-button>
      <btu-icon-button
        symbol="strikethrough"
        type="secondary-stroke"
        value="strikethrough"
        aria-label="Strikethrough"
      ></btu-icon-button>
    </btu-button-group>
  `,parameters:{docs:{description:{story:"Icon-only buttons using `btu-icon-button`. Accessible labels are provided via `aria-label`."}}}},m={render:()=>e`
    <btu-button-group label="Actions" variant="connected">
      <button class="btu-button btu-button-outline btu-button-success" value="save">Save</button>
      <button class="btu-button-secondary btu-button btu-button-outline" value="preview">Preview</button>
      <btu-dropdown label="More options" variant="tertiary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Export"></btu-dropdown-item>
          <btu-dropdown-item label="Duplicate"></btu-dropdown-item>
          <btu-dropdown-item label="Archive"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </btu-button-group>
  `,parameters:{docs:{description:{story:"Non-button children like `btu-dropdown` can be placed inside the group. They participate in layout but are excluded from selection sync."}}}},v={render:()=>e`
    <div
      style="display: flex; flex-direction: column; height: 400px; width: min-content; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem; padding: 0.25rem;"
    >
      <btu-button-group
        label="Sidebar tools"
        orientation="vertical"
        variant="spaced"
        selection="multiple"
        value="preview,components"
        style="height: 100%;"
      >
        <btu-icon-button symbol="eye" type="secondary-stroke" value="preview" aria-label="Preview"></btu-icon-button>
        <btu-icon-button
          symbol="layout-grid"
          type="secondary-stroke"
          value="components"
          aria-label="Components"
        ></btu-icon-button>
        <btu-icon-button
          symbol="history"
          type="secondary-stroke"
          value="history"
          aria-label="History"
        ></btu-icon-button>
        <btu-icon-button
          symbol="message-circle"
          type="secondary-stroke"
          value="comments"
          aria-label="Comments"
        ></btu-icon-button>
        <btu-icon-button
          symbol="search"
          type="secondary-stroke"
          value="search"
          aria-label="Search"
          slot="end"
        ></btu-icon-button>
      </btu-button-group>
    </div>
  `,parameters:{docs:{description:{story:'Vertical sidebar with `slot="end"` pushing the search button to the bottom. The group must have explicit height (or fill its parent) for the auto-margin to work.'}}}},h={render:()=>e`
    <div
      style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
    >
      <btu-button-group label="Text formatting" selection="multiple" value="bold,italic" size="sm">
        <btu-icon-button symbol="bold" type="secondary-stroke" value="bold" aria-label="Bold"></btu-icon-button>
        <btu-icon-button symbol="italic" type="secondary-stroke" value="italic" aria-label="Italic"></btu-icon-button>
        <btu-icon-button
          symbol="underline"
          type="secondary-stroke"
          value="underline"
          aria-label="Underline"
        ></btu-icon-button>
      </btu-button-group>

      <div style="width: 1px; height: 1.5rem; background: oklch(var(--btu-theme-gray-200));"></div>

      <btu-button-group label="Text alignment" selection="single" value="left" size="sm">
        <btu-icon-button
          symbol="align-left"
          type="secondary-stroke"
          value="left"
          aria-label="Align left"
        ></btu-icon-button>
        <btu-icon-button
          symbol="align-center"
          type="secondary-stroke"
          value="center"
          aria-label="Align center"
        ></btu-icon-button>
        <btu-icon-button
          symbol="align-right"
          type="secondary-stroke"
          value="right"
          aria-label="Align right"
        ></btu-icon-button>
        <btu-icon-button
          symbol="align-justify"
          type="secondary-stroke"
          value="justify"
          aria-label="Justify"
        ></btu-icon-button>
      </btu-button-group>

      <div style="width: 1px; height: 1.5rem; background: oklch(var(--btu-theme-gray-200));"></div>

      <btu-button-group label="Lists" selection="single" size="sm">
        <btu-icon-button
          symbol="list"
          type="secondary-stroke"
          value="bullet"
          aria-label="Bullet list"
        ></btu-icon-button>
        <btu-icon-button
          symbol="list-ordered"
          type="secondary-stroke"
          value="numbered"
          aria-label="Numbered list"
        ></btu-icon-button>
      </btu-button-group>

      <div style="width: 1px; height: 1.5rem; background: oklch(var(--btu-theme-gray-200));"></div>

      <btu-button-group label="Insert" selection="single" size="sm">
        <btu-icon-button symbol="code" type="secondary-stroke" value="code" aria-label="Code"></btu-icon-button>
        <btu-icon-button symbol="link" type="secondary-stroke" value="link" aria-label="Link"></btu-icon-button>
        <btu-icon-button symbol="table" type="secondary-stroke" value="table" aria-label="Table"></btu-icon-button>
      </btu-button-group>
    </div>
  `,parameters:{docs:{description:{story:"Multiple button groups using `btu-icon-button` components to form a rich text editor toolbar. Each group manages its own selection mode independently: formatting (multiple), alignment (single), lists (single), and insert (single)."}}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:"{}",...r.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
  args: {
    variant: 'spaced'
  },
  parameters: {
    docs: {
      description: {
        story: 'Buttons rendered with a gap between them instead of joined borders.'
      }
    }
  }
}`,...b.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
  args: {
    orientation: 'vertical'
  },
  parameters: {
    docs: {
      description: {
        story: 'Vertical layout with connected (joined) buttons.'
      }
    }
  }
}`,...l.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  args: {
    orientation: 'vertical',
    variant: 'spaced'
  },
  parameters: {
    docs: {
      description: {
        story: 'Vertical layout with spaced buttons.'
      }
    }
  }
}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
      <btu-button-group label="Small actions" size="sm">
        <button class="btu-button btu-button-outline btu-button-gray" value="cut">Cut</button>
        <button class="btu-button btu-button-outline btu-button-gray" value="copy">Copy</button>
        <button class="btu-button btu-button-outline btu-button-gray" value="paste">Paste</button>
      </btu-button-group>
      <btu-button-group label="Medium actions" size="md">
        <button class="btu-button btu-button-outline btu-button-gray" value="cut">Cut</button>
        <button class="btu-button btu-button-outline btu-button-gray" value="copy">Copy</button>
        <button class="btu-button btu-button-outline btu-button-gray" value="paste">Paste</button>
      </btu-button-group>
      <btu-button-group label="Large actions" size="lg">
        <button class="btu-button btu-button-outline btu-button-gray" value="cut">Cut</button>
        <button class="btu-button btu-button-outline btu-button-gray" value="copy">Copy</button>
        <button class="btu-button btu-button-outline btu-button-gray" value="paste">Paste</button>
      </btu-button-group>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'The group propagates its \`size\` to all child buttons. \`sm\`, \`md\`, and \`lg\` shown.'
      }
    }
  }
}`,...i.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
  args: {
    disabled: true
  },
  parameters: {
    docs: {
      description: {
        story: 'Setting \`disabled\` on the group disables all child buttons and sets \`aria-disabled="true"\`.'
      }
    }
  }
}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Text alignment',
    selection: 'single',
    value: 'center'
  },
  render: (args: Record<string, unknown>) => html\`
    <btu-button-group
      label=\${args.label}
      selection=\${args.selection}
      value=\${args.value}
      variant=\${args.variant}
      size=\${args.size}
      ?disabled=\${args.disabled}
      style=\${styleMap(cssPropsStyle(args))}
    >
      <button class="btu-button btu-button-outline btu-button-gray" value="left">Left</button>
      <button class="btu-button btu-button-outline btu-button-gray" value="center">Center</button>
      <button class="btu-button btu-button-outline btu-button-gray" value="right">Right</button>
      <button class="btu-button btu-button-outline btu-button-gray" value="justify">Justify</button>
    </btu-button-group>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Single selection mode — one button active at a time. Click the active button to deselect. Arrow keys move and activate.'
      }
    }
  }
}`,...d.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Text formatting',
    selection: 'multiple',
    value: 'bold,italic'
  },
  render: (args: Record<string, unknown>) => html\`
    <btu-button-group
      label=\${args.label}
      selection=\${args.selection}
      value=\${args.value}
      variant=\${args.variant}
      size=\${args.size}
      ?disabled=\${args.disabled}
      style=\${styleMap(cssPropsStyle(args))}
    >
      <button class="btu-button btu-button-outline btu-button-gray" value="bold"><strong>B</strong></button>
      <button class="btu-button btu-button-outline btu-button-gray" value="italic"><em>I</em></button>
      <button class="btu-button btu-button-outline btu-button-gray" value="underline"><u>U</u></button>
      <button class="btu-button btu-button-outline btu-button-gray" value="strikethrough"><s>S</s></button>
    </btu-button-group>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Multiple selection mode — any number of buttons can be active simultaneously. Arrow keys move focus, Space/Enter toggles.'
      }
    }
  }
}`,...p.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'View mode',
    selection: 'single',
    value: 'grid'
  },
  render: (args: Record<string, unknown>) => html\`
    <btu-button-group
      label=\${args.label}
      selection=\${args.selection}
      value=\${args.value}
      variant=\${args.variant}
      size=\${args.size}
      style=\${styleMap(cssPropsStyle(args))}
    >
      <button class="btu-button btu-button-outline btu-button-gray" value="list">List</button>
      <button class="btu-button btu-button-outline btu-button-gray" value="grid">Grid</button>
      <button class="btu-button btu-button-outline btu-button-gray" value="table">Table</button>
    </btu-button-group>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'The \`value\` attribute can be set declaratively in HTML to pre-select a button on first render.'
      }
    }
  }
}`,...g.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Toolbar',
    selection: 'multiple',
    value: ''
  },
  render: (args: Record<string, unknown>) => html\`
    <btu-button-group
      label=\${args.label}
      selection=\${args.selection}
      value=\${args.value}
      variant=\${args.variant}
      size=\${args.size}
      style=\${styleMap(cssPropsStyle(args))}
    >
      <btu-icon-button symbol="bold" type="secondary-stroke" value="bold" aria-label="Bold"></btu-icon-button>
      <btu-icon-button symbol="italic" type="secondary-stroke" value="italic" aria-label="Italic"></btu-icon-button>
      <btu-icon-button
        symbol="underline"
        type="secondary-stroke"
        value="underline"
        aria-label="Underline"
      ></btu-icon-button>
      <btu-icon-button
        symbol="strikethrough"
        type="secondary-stroke"
        value="strikethrough"
        aria-label="Strikethrough"
      ></btu-icon-button>
    </btu-button-group>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Icon-only buttons using \`btu-icon-button\`. Accessible labels are provided via \`aria-label\`.'
      }
    }
  }
}`,...y.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <btu-button-group label="Actions" variant="connected">
      <button class="btu-button btu-button-outline btu-button-success" value="save">Save</button>
      <button class="btu-button-secondary btu-button btu-button-outline" value="preview">Preview</button>
      <btu-dropdown label="More options" variant="tertiary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Export"></btu-dropdown-item>
          <btu-dropdown-item label="Duplicate"></btu-dropdown-item>
          <btu-dropdown-item label="Archive"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </btu-button-group>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Non-button children like \`btu-dropdown\` can be placed inside the group. They participate in layout but are excluded from selection sync.'
      }
    }
  }
}`,...m.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div
      style="display: flex; flex-direction: column; height: 400px; width: min-content; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem; padding: 0.25rem;"
    >
      <btu-button-group
        label="Sidebar tools"
        orientation="vertical"
        variant="spaced"
        selection="multiple"
        value="preview,components"
        style="height: 100%;"
      >
        <btu-icon-button symbol="eye" type="secondary-stroke" value="preview" aria-label="Preview"></btu-icon-button>
        <btu-icon-button
          symbol="layout-grid"
          type="secondary-stroke"
          value="components"
          aria-label="Components"
        ></btu-icon-button>
        <btu-icon-button
          symbol="history"
          type="secondary-stroke"
          value="history"
          aria-label="History"
        ></btu-icon-button>
        <btu-icon-button
          symbol="message-circle"
          type="secondary-stroke"
          value="comments"
          aria-label="Comments"
        ></btu-icon-button>
        <btu-icon-button
          symbol="search"
          type="secondary-stroke"
          value="search"
          aria-label="Search"
          slot="end"
        ></btu-icon-button>
      </btu-button-group>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Vertical sidebar with \`slot="end"\` pushing the search button to the bottom. The group must have explicit height (or fill its parent) for the auto-margin to work.'
      }
    }
  }
}`,...v.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div
      style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
    >
      <btu-button-group label="Text formatting" selection="multiple" value="bold,italic" size="sm">
        <btu-icon-button symbol="bold" type="secondary-stroke" value="bold" aria-label="Bold"></btu-icon-button>
        <btu-icon-button symbol="italic" type="secondary-stroke" value="italic" aria-label="Italic"></btu-icon-button>
        <btu-icon-button
          symbol="underline"
          type="secondary-stroke"
          value="underline"
          aria-label="Underline"
        ></btu-icon-button>
      </btu-button-group>

      <div style="width: 1px; height: 1.5rem; background: oklch(var(--btu-theme-gray-200));"></div>

      <btu-button-group label="Text alignment" selection="single" value="left" size="sm">
        <btu-icon-button
          symbol="align-left"
          type="secondary-stroke"
          value="left"
          aria-label="Align left"
        ></btu-icon-button>
        <btu-icon-button
          symbol="align-center"
          type="secondary-stroke"
          value="center"
          aria-label="Align center"
        ></btu-icon-button>
        <btu-icon-button
          symbol="align-right"
          type="secondary-stroke"
          value="right"
          aria-label="Align right"
        ></btu-icon-button>
        <btu-icon-button
          symbol="align-justify"
          type="secondary-stroke"
          value="justify"
          aria-label="Justify"
        ></btu-icon-button>
      </btu-button-group>

      <div style="width: 1px; height: 1.5rem; background: oklch(var(--btu-theme-gray-200));"></div>

      <btu-button-group label="Lists" selection="single" size="sm">
        <btu-icon-button
          symbol="list"
          type="secondary-stroke"
          value="bullet"
          aria-label="Bullet list"
        ></btu-icon-button>
        <btu-icon-button
          symbol="list-ordered"
          type="secondary-stroke"
          value="numbered"
          aria-label="Numbered list"
        ></btu-icon-button>
      </btu-button-group>

      <div style="width: 1px; height: 1.5rem; background: oklch(var(--btu-theme-gray-200));"></div>

      <btu-button-group label="Insert" selection="single" size="sm">
        <btu-icon-button symbol="code" type="secondary-stroke" value="code" aria-label="Code"></btu-icon-button>
        <btu-icon-button symbol="link" type="secondary-stroke" value="link" aria-label="Link"></btu-icon-button>
        <btu-icon-button symbol="table" type="secondary-stroke" value="table" aria-label="Table"></btu-icon-button>
      </btu-button-group>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Multiple button groups using \`btu-icon-button\` components to form a rich text editor toolbar. Each group manages its own selection mode independently: formatting (multiple), alignment (single), lists (single), and insert (single).'
      }
    }
  }
}`,...h.parameters?.docs?.source}}};const C=["Default","Spaced","VerticalConnected","VerticalSpaced","Sizes","Disabled","SingleSelection","MultipleSelection","PreSelectedValue","WithIcons","MixedContent","VerticalSidebar","RTEToolbar"];export{r as Default,c as Disabled,m as MixedContent,p as MultipleSelection,g as PreSelectedValue,h as RTEToolbar,d as SingleSelection,i as Sizes,b as Spaced,l as VerticalConnected,v as VerticalSidebar,s as VerticalSpaced,y as WithIcons,C as __namedExportsOrder,z as default};
