import{g as p,x as e}from"./iframe-CMPv_g6-.js";import{o as b}from"./if-defined-DzbkssR9.js";import{L as d}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:y,argTypes:o}=p("btu-icon-button"),x={title:"Components/Icon Button",component:"btu-icon-button",tags:["autodocs"],parameters:{docs:{subtitle:"Combines button styles with the icon component along with an opinionated API",description:{component:`
<h3>When to use:</h3>
<ul>
  <li>For actions in compact or space-constrained interfaces (toolbars, tables, cards)</li>
  <li>When the icon clearly communicates the action without a text label</li>
  <li>As icon-only variants of existing text buttons</li>
</ul>

<h3>Accessibility:</h3>
<ul>
  <li>Always provide an <code>aria-label</code> or <code>tooltip</code> for screen readers</li>
  <li>Use the <code>tooltip</code> attribute to surface the action name on hover/focus</li>
  <li>Use <code>destructive</code> for actions that cannot be undone</li>
</ul>

<h3>CSS Customization:</h3>
<p>Icons are powered by the <a href="?path=/docs/components-icon--docs">Icon component</a>. and the button styles are from the <a href="?path=/docs/css-plugins-button--docs">Button plugin</a>. Visit their docs for all available CSS property overrides.</p>
        `}},actions:{handles:u},controls:{expanded:!0}},args:{...y,symbol:"pencil",type:"primary",size:"md",destructive:!1,tooltip:"Edit item"},argTypes:{...o,tooltip:{...o.tooltip,control:{type:"text"},description:"Tooltip text shown on hover (via TooltipMixin)",table:{category:"Tooltip"}},"tooltip-position":{...o["tooltip-position"],control:{type:"select"},options:["top","bottom","left","right"],description:"Tooltip placement",table:{category:"Tooltip"}},symbol:{...o.symbol,control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name. Note that only icons available in Lucide v'+d+" are supported."},size:{...o.size,control:{type:"select"},options:["sm","md","lg"]},type:{...o.type,control:{type:"select"},options:["primary","primary-clear","primary-stroke","secondary","secondary-clear","secondary-stroke","tertiary","tertiary-clear","tertiary-stroke"]}},render:t=>e`
    <btu-icon-button
      symbol="${t.symbol??"circle-dashed"}"
      type="${t.type??"primary"}"
      size="${t.size??"md"}"
      aria-label="Edit"
      name=${b(t.name||void 0)}
      tooltip=${b(t.tooltip||void 0)}
      tooltip-position="${t["tooltip-position"]??"top"}"
      ?destructive="${t.destructive}"
      ?disabled="${t.disabled}"
    ></btu-icon-button>
  `},n={parameters:{docs:{description:{story:"Default icon button with primary type. Always pair with an `aria-label` or `tooltip` for accessibility."}}}},i={render:()=>e`
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
      <btu-icon-button symbol="pencil" type="primary" tooltip="primary" aria-label="primary"></btu-icon-button>
      <btu-icon-button
        symbol="pencil"
        type="primary-clear"
        tooltip="primary-clear"
        aria-label="primary-clear"
      ></btu-icon-button>
      <btu-icon-button
        symbol="pencil"
        type="primary-stroke"
        tooltip="primary-stroke"
        aria-label="primary-stroke"
      ></btu-icon-button>
      <btu-icon-button symbol="pencil" type="secondary" tooltip="secondary" aria-label="secondary"></btu-icon-button>
      <btu-icon-button
        symbol="pencil"
        type="secondary-clear"
        tooltip="secondary-clear"
        aria-label="secondary-clear"
      ></btu-icon-button>
      <btu-icon-button
        symbol="pencil"
        type="secondary-stroke"
        tooltip="secondary-stroke"
        aria-label="secondary-stroke"
      ></btu-icon-button>
      <btu-icon-button symbol="pencil" type="tertiary" tooltip="tertiary" aria-label="tertiary"></btu-icon-button>
      <btu-icon-button
        symbol="pencil"
        type="tertiary-clear"
        tooltip="tertiary-clear"
        aria-label="tertiary-clear"
      ></btu-icon-button>
      <btu-icon-button
        symbol="pencil"
        type="tertiary-stroke"
        tooltip="tertiary-stroke"
        aria-label="tertiary-stroke"
      ></btu-icon-button>
    </div>
  `,parameters:{docs:{description:{story:"All available types. Solid variants have a filled background; `-clear` removes the fill; `-stroke` adds an outline."}}}},a={render:()=>e`
    <div style="display: flex; gap: 1rem; align-items: center;">
      <btu-icon-button symbol="pencil" size="sm" tooltip="small" aria-label="small"></btu-icon-button>
      <btu-icon-button symbol="pencil" size="md" tooltip="medium" aria-label="medium"></btu-icon-button>
      <btu-icon-button symbol="pencil" size="lg" tooltip="large" aria-label="large"></btu-icon-button>
    </div>
  `,parameters:{docs:{description:{story:"Available in three sizes: `sm`, `md` (default), and `lg`."}}}},r={render:()=>e`
    <div style="display: flex; gap: 1rem; align-items: center;">
      <btu-icon-button
        symbol="trash-2"
        type="primary"
        destructive
        tooltip="Delete (primary)"
        aria-label="Delete"
      ></btu-icon-button>
      <btu-icon-button
        symbol="trash-2"
        type="primary-clear"
        destructive
        tooltip="Delete (primary-clear)"
        aria-label="Delete"
      ></btu-icon-button>
      <btu-icon-button
        symbol="trash-2"
        type="secondary"
        destructive
        tooltip="Delete (secondary)"
        aria-label="Delete"
      ></btu-icon-button>
      <btu-icon-button
        symbol="trash-2"
        type="secondary-stroke"
        destructive
        tooltip="Delete (secondary-stroke)"
        aria-label="Delete"
      ></btu-icon-button>
    </div>
  `,parameters:{docs:{description:{story:"The `destructive` flag overrides the type color with the error color. Use for actions that cannot be undone."}}}},s={render:()=>e`
    <div style="display: flex; gap: 2rem; align-items: center; padding: 3rem;">
      <btu-icon-button symbol="pencil" tooltip="Edit item" tooltip-position="top" aria-label="Edit"></btu-icon-button>
      <btu-icon-button
        symbol="copy"
        tooltip="Copy to clipboard"
        tooltip-position="bottom"
        aria-label="Copy"
      ></btu-icon-button>
      <btu-icon-button
        symbol="share-2"
        tooltip="Share"
        tooltip-position="left"
        aria-label="Share"
        type="secondary"
      ></btu-icon-button>
      <btu-icon-button
        symbol="download"
        tooltip="Download"
        tooltip-position="right"
        aria-label="Download"
        type="secondary"
      ></btu-icon-button>
    </div>
  `,parameters:{docs:{description:{story:"Tooltip position can be set with `tooltip-position`. Defaults to `top`. Hover over each button to see the tooltip."}}}},l={render:()=>e`
    <div style="display: flex; gap: 0.5rem; align-items: center;">
      <btu-icon-button symbol="pencil" type="secondary-clear" tooltip="Edit" aria-label="Edit"></btu-icon-button>
      <btu-icon-button symbol="copy" type="secondary-clear" tooltip="Copy" aria-label="Copy"></btu-icon-button>
      <btu-icon-button
        symbol="trash-2"
        type="secondary-clear"
        destructive
        tooltip="Delete"
        aria-label="Delete"
      ></btu-icon-button>
    </div>
  `,parameters:{docs:{description:{story:"Common action group pattern: edit, copy, and delete using `secondary-clear` with inline spacing."}}}},c={render:()=>e`
    <div class="flex flex-col gap-6">
      <div class="flex flex-col gap-2">
        <strong>Custom border radius:</strong>
        <div class="flex items-center gap-3">
          <btu-icon-button
            symbol="circle-play"
            type="primary"
            style="--button-border-radius: 50%"
            tooltip="Play"
            aria-label="Play"
          ></btu-icon-button>
          <btu-icon-button
            symbol="circle-play"
            type="secondary"
            size="lg"
            style="--button-border-radius: 50%"
            tooltip="Play"
            aria-label="Play"
          ></btu-icon-button>
          <btu-icon-button
            symbol="settings"
            type="tertiary-clear"
            style="--button-border-radius: 0"
            tooltip="Settings"
            aria-label="Settings"
          ></btu-icon-button>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Toolbar pattern:</strong>
        <div
          class="flex items-center gap-0.5 rounded-lg border border-gray-200 bg-white p-1"
          style="width: fit-content"
        >
          <btu-icon-button
            symbol="bold"
            type="secondary-clear"
            size="sm"
            aria-label="Bold"
            style="--button-border-radius: 0.25rem"
          ></btu-icon-button>
          <btu-icon-button
            symbol="italic"
            type="secondary-clear"
            size="sm"
            aria-label="Italic"
            style="--button-border-radius: 0.25rem"
          ></btu-icon-button>
          <btu-icon-button
            symbol="underline"
            type="secondary-clear"
            size="sm"
            aria-label="Underline"
            style="--button-border-radius: 0.25rem"
          ></btu-icon-button>
          <div style="width: 1px; height: 1.25rem; background: oklch(var(--btu-theme-gray-200))"></div>
          <btu-icon-button
            symbol="align-left"
            type="secondary-clear"
            size="sm"
            aria-label="Align left"
            style="--button-border-radius: 0.25rem"
          ></btu-icon-button>
          <btu-icon-button
            symbol="align-center"
            type="secondary-clear"
            size="sm"
            aria-label="Align center"
            style="--button-border-radius: 0.25rem"
          ></btu-icon-button>
          <btu-icon-button
            symbol="align-right"
            type="secondary-clear"
            size="sm"
            aria-label="Align right"
            style="--button-border-radius: 0.25rem"
          ></btu-icon-button>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Destructive confirmation pair:</strong>
        <div class="flex items-center gap-2">
          <btu-icon-button
            symbol="x"
            type="secondary-clear"
            size="sm"
            tooltip="Cancel"
            aria-label="Cancel"
          ></btu-icon-button>
          <btu-icon-button
            symbol="trash-2"
            type="primary"
            destructive
            size="sm"
            tooltip="Confirm delete"
            aria-label="Confirm delete"
          ></btu-icon-button>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Card header actions:</strong>
        <div class="rounded-lg border border-gray-200 bg-white" style="width: 20rem">
          <div class="flex items-center justify-between border-b border-gray-200 px-4 py-3">
            <span class="text-sm font-semibold text-gray-900">Recent Activity</span>
            <div class="flex items-center gap-1">
              <btu-icon-button
                symbol="refresh-cw"
                type="secondary-clear"
                size="sm"
                tooltip="Refresh"
                aria-label="Refresh"
              ></btu-icon-button>
              <btu-icon-button
                symbol="maximize-2"
                type="secondary-clear"
                size="sm"
                tooltip="Expand"
                aria-label="Expand"
              ></btu-icon-button>
              <btu-icon-button
                symbol="x"
                type="secondary-clear"
                size="sm"
                tooltip="Close"
                aria-label="Close"
              ></btu-icon-button>
            </div>
          </div>
          <div class="p-4 text-sm text-gray-500">Card content area</div>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Toggle states with <code>aria-pressed</code>:</strong>
        <div class="flex items-end gap-4">
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button
              symbol="bookmark"
              type="primary"
              aria-label="Bookmark"
              aria-pressed="true"
              tooltip="Bookmarked"
            ></btu-icon-button>
            <span class="text-xs text-gray-400">pressed</span>
          </div>
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button
              symbol="bookmark"
              type="secondary-clear"
              aria-label="Bookmark"
              aria-pressed="false"
              tooltip="Not bookmarked"
            ></btu-icon-button>
            <span class="text-xs text-gray-400">default</span>
          </div>
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button
              symbol="bell"
              type="primary"
              aria-label="Notifications on"
              aria-pressed="true"
              tooltip="Notifications on"
            ></btu-icon-button>
            <span class="text-xs text-gray-400">pressed</span>
          </div>
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button
              symbol="bell-off"
              type="secondary-clear"
              aria-label="Notifications off"
              aria-pressed="false"
              tooltip="Notifications off"
            ></btu-icon-button>
            <span class="text-xs text-gray-400">default</span>
          </div>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Size comparison across types:</strong>
        <div class="flex items-end gap-4">
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button symbol="plus" type="primary" size="sm" aria-label="Add"></btu-icon-button>
            <span class="text-xs text-gray-400">sm</span>
          </div>
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button symbol="plus" type="primary-stroke" size="md" aria-label="Add"></btu-icon-button>
            <span class="text-xs text-gray-400">md</span>
          </div>
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button symbol="plus" type="tertiary" size="lg" aria-label="Add"></btu-icon-button>
            <span class="text-xs text-gray-400">lg</span>
          </div>
        </div>
      </div>
    </div>
  `,parameters:{docs:{description:{story:"\n- **Custom border radius** via `--button-border-radius` CSS property — use `50%` for circular buttons or `0` for sharp corners.\n- **Toolbar pattern** uses `secondary-clear` with `sm` size and reduced border-radius for a compact grouped layout.\n- **Destructive confirmation pair** combines a cancel action with a destructive confirm for inline delete flows.\n- **Card header actions** show a common pattern of icon buttons in a card/panel header for refresh, expand, and close.\n- **Toggle states** use `aria-pressed` to indicate on/off state — the button plugin provides pressed styling automatically.\n- **Size comparison** shows all three sizes side-by-side across different types for visual reference."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: 'Default icon button with primary type. Always pair with an \`aria-label\` or \`tooltip\` for accessibility.'
      }
    }
  }
}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
      <btu-icon-button symbol="pencil" type="primary" tooltip="primary" aria-label="primary"></btu-icon-button>
      <btu-icon-button
        symbol="pencil"
        type="primary-clear"
        tooltip="primary-clear"
        aria-label="primary-clear"
      ></btu-icon-button>
      <btu-icon-button
        symbol="pencil"
        type="primary-stroke"
        tooltip="primary-stroke"
        aria-label="primary-stroke"
      ></btu-icon-button>
      <btu-icon-button symbol="pencil" type="secondary" tooltip="secondary" aria-label="secondary"></btu-icon-button>
      <btu-icon-button
        symbol="pencil"
        type="secondary-clear"
        tooltip="secondary-clear"
        aria-label="secondary-clear"
      ></btu-icon-button>
      <btu-icon-button
        symbol="pencil"
        type="secondary-stroke"
        tooltip="secondary-stroke"
        aria-label="secondary-stroke"
      ></btu-icon-button>
      <btu-icon-button symbol="pencil" type="tertiary" tooltip="tertiary" aria-label="tertiary"></btu-icon-button>
      <btu-icon-button
        symbol="pencil"
        type="tertiary-clear"
        tooltip="tertiary-clear"
        aria-label="tertiary-clear"
      ></btu-icon-button>
      <btu-icon-button
        symbol="pencil"
        type="tertiary-stroke"
        tooltip="tertiary-stroke"
        aria-label="tertiary-stroke"
      ></btu-icon-button>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'All available types. Solid variants have a filled background; \`-clear\` removes the fill; \`-stroke\` adds an outline.'
      }
    }
  }
}`,...i.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; gap: 1rem; align-items: center;">
      <btu-icon-button symbol="pencil" size="sm" tooltip="small" aria-label="small"></btu-icon-button>
      <btu-icon-button symbol="pencil" size="md" tooltip="medium" aria-label="medium"></btu-icon-button>
      <btu-icon-button symbol="pencil" size="lg" tooltip="large" aria-label="large"></btu-icon-button>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Available in three sizes: \`sm\`, \`md\` (default), and \`lg\`.'
      }
    }
  }
}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; gap: 1rem; align-items: center;">
      <btu-icon-button
        symbol="trash-2"
        type="primary"
        destructive
        tooltip="Delete (primary)"
        aria-label="Delete"
      ></btu-icon-button>
      <btu-icon-button
        symbol="trash-2"
        type="primary-clear"
        destructive
        tooltip="Delete (primary-clear)"
        aria-label="Delete"
      ></btu-icon-button>
      <btu-icon-button
        symbol="trash-2"
        type="secondary"
        destructive
        tooltip="Delete (secondary)"
        aria-label="Delete"
      ></btu-icon-button>
      <btu-icon-button
        symbol="trash-2"
        type="secondary-stroke"
        destructive
        tooltip="Delete (secondary-stroke)"
        aria-label="Delete"
      ></btu-icon-button>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'The \`destructive\` flag overrides the type color with the error color. Use for actions that cannot be undone.'
      }
    }
  }
}`,...r.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; gap: 2rem; align-items: center; padding: 3rem;">
      <btu-icon-button symbol="pencil" tooltip="Edit item" tooltip-position="top" aria-label="Edit"></btu-icon-button>
      <btu-icon-button
        symbol="copy"
        tooltip="Copy to clipboard"
        tooltip-position="bottom"
        aria-label="Copy"
      ></btu-icon-button>
      <btu-icon-button
        symbol="share-2"
        tooltip="Share"
        tooltip-position="left"
        aria-label="Share"
        type="secondary"
      ></btu-icon-button>
      <btu-icon-button
        symbol="download"
        tooltip="Download"
        tooltip-position="right"
        aria-label="Download"
        type="secondary"
      ></btu-icon-button>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Tooltip position can be set with \`tooltip-position\`. Defaults to \`top\`. Hover over each button to see the tooltip.'
      }
    }
  }
}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; gap: 0.5rem; align-items: center;">
      <btu-icon-button symbol="pencil" type="secondary-clear" tooltip="Edit" aria-label="Edit"></btu-icon-button>
      <btu-icon-button symbol="copy" type="secondary-clear" tooltip="Copy" aria-label="Copy"></btu-icon-button>
      <btu-icon-button
        symbol="trash-2"
        type="secondary-clear"
        destructive
        tooltip="Delete"
        aria-label="Delete"
      ></btu-icon-button>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Common action group pattern: edit, copy, and delete using \`secondary-clear\` with inline spacing.'
      }
    }
  }
}`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div class="flex flex-col gap-6">
      <div class="flex flex-col gap-2">
        <strong>Custom border radius:</strong>
        <div class="flex items-center gap-3">
          <btu-icon-button
            symbol="circle-play"
            type="primary"
            style="--button-border-radius: 50%"
            tooltip="Play"
            aria-label="Play"
          ></btu-icon-button>
          <btu-icon-button
            symbol="circle-play"
            type="secondary"
            size="lg"
            style="--button-border-radius: 50%"
            tooltip="Play"
            aria-label="Play"
          ></btu-icon-button>
          <btu-icon-button
            symbol="settings"
            type="tertiary-clear"
            style="--button-border-radius: 0"
            tooltip="Settings"
            aria-label="Settings"
          ></btu-icon-button>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Toolbar pattern:</strong>
        <div
          class="flex items-center gap-0.5 rounded-lg border border-gray-200 bg-white p-1"
          style="width: fit-content"
        >
          <btu-icon-button
            symbol="bold"
            type="secondary-clear"
            size="sm"
            aria-label="Bold"
            style="--button-border-radius: 0.25rem"
          ></btu-icon-button>
          <btu-icon-button
            symbol="italic"
            type="secondary-clear"
            size="sm"
            aria-label="Italic"
            style="--button-border-radius: 0.25rem"
          ></btu-icon-button>
          <btu-icon-button
            symbol="underline"
            type="secondary-clear"
            size="sm"
            aria-label="Underline"
            style="--button-border-radius: 0.25rem"
          ></btu-icon-button>
          <div style="width: 1px; height: 1.25rem; background: oklch(var(--btu-theme-gray-200))"></div>
          <btu-icon-button
            symbol="align-left"
            type="secondary-clear"
            size="sm"
            aria-label="Align left"
            style="--button-border-radius: 0.25rem"
          ></btu-icon-button>
          <btu-icon-button
            symbol="align-center"
            type="secondary-clear"
            size="sm"
            aria-label="Align center"
            style="--button-border-radius: 0.25rem"
          ></btu-icon-button>
          <btu-icon-button
            symbol="align-right"
            type="secondary-clear"
            size="sm"
            aria-label="Align right"
            style="--button-border-radius: 0.25rem"
          ></btu-icon-button>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Destructive confirmation pair:</strong>
        <div class="flex items-center gap-2">
          <btu-icon-button
            symbol="x"
            type="secondary-clear"
            size="sm"
            tooltip="Cancel"
            aria-label="Cancel"
          ></btu-icon-button>
          <btu-icon-button
            symbol="trash-2"
            type="primary"
            destructive
            size="sm"
            tooltip="Confirm delete"
            aria-label="Confirm delete"
          ></btu-icon-button>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Card header actions:</strong>
        <div class="rounded-lg border border-gray-200 bg-white" style="width: 20rem">
          <div class="flex items-center justify-between border-b border-gray-200 px-4 py-3">
            <span class="text-sm font-semibold text-gray-900">Recent Activity</span>
            <div class="flex items-center gap-1">
              <btu-icon-button
                symbol="refresh-cw"
                type="secondary-clear"
                size="sm"
                tooltip="Refresh"
                aria-label="Refresh"
              ></btu-icon-button>
              <btu-icon-button
                symbol="maximize-2"
                type="secondary-clear"
                size="sm"
                tooltip="Expand"
                aria-label="Expand"
              ></btu-icon-button>
              <btu-icon-button
                symbol="x"
                type="secondary-clear"
                size="sm"
                tooltip="Close"
                aria-label="Close"
              ></btu-icon-button>
            </div>
          </div>
          <div class="p-4 text-sm text-gray-500">Card content area</div>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Toggle states with <code>aria-pressed</code>:</strong>
        <div class="flex items-end gap-4">
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button
              symbol="bookmark"
              type="primary"
              aria-label="Bookmark"
              aria-pressed="true"
              tooltip="Bookmarked"
            ></btu-icon-button>
            <span class="text-xs text-gray-400">pressed</span>
          </div>
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button
              symbol="bookmark"
              type="secondary-clear"
              aria-label="Bookmark"
              aria-pressed="false"
              tooltip="Not bookmarked"
            ></btu-icon-button>
            <span class="text-xs text-gray-400">default</span>
          </div>
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button
              symbol="bell"
              type="primary"
              aria-label="Notifications on"
              aria-pressed="true"
              tooltip="Notifications on"
            ></btu-icon-button>
            <span class="text-xs text-gray-400">pressed</span>
          </div>
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button
              symbol="bell-off"
              type="secondary-clear"
              aria-label="Notifications off"
              aria-pressed="false"
              tooltip="Notifications off"
            ></btu-icon-button>
            <span class="text-xs text-gray-400">default</span>
          </div>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Size comparison across types:</strong>
        <div class="flex items-end gap-4">
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button symbol="plus" type="primary" size="sm" aria-label="Add"></btu-icon-button>
            <span class="text-xs text-gray-400">sm</span>
          </div>
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button symbol="plus" type="primary-stroke" size="md" aria-label="Add"></btu-icon-button>
            <span class="text-xs text-gray-400">md</span>
          </div>
          <div class="flex flex-col items-center gap-1">
            <btu-icon-button symbol="plus" type="tertiary" size="lg" aria-label="Add"></btu-icon-button>
            <span class="text-xs text-gray-400">lg</span>
          </div>
        </div>
      </div>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: \`
- **Custom border radius** via \\\`--button-border-radius\\\` CSS property — use \\\`50%\\\` for circular buttons or \\\`0\\\` for sharp corners.
- **Toolbar pattern** uses \\\`secondary-clear\\\` with \\\`sm\\\` size and reduced border-radius for a compact grouped layout.
- **Destructive confirmation pair** combines a cancel action with a destructive confirm for inline delete flows.
- **Card header actions** show a common pattern of icon buttons in a card/panel header for refresh, expand, and close.
- **Toggle states** use \\\`aria-pressed\\\` to indicate on/off state — the button plugin provides pressed styling automatically.
- **Size comparison** shows all three sizes side-by-side across different types for visual reference.\`
      }
    }
  }
}`,...c.parameters?.docs?.source}}};const h=["Default","Types","Sizes","Destructive","WithTooltip","CommonActions","AdvancedUsage"];export{c as AdvancedUsage,l as CommonActions,n as Default,r as Destructive,a as Sizes,i as Types,s as WithTooltip,h as __namedExportsOrder,x as default};
