@brightspot/ui 1.7.0 → 1.9.0

package/dist/storybook/assets/IconButton.stories-o9g9mGdh.js

@@ -0,0 +1,748 @@
+import{g as p,x as e}from"./iframe-BeKreX-l.js";import{o as b}from"./if-defined-BFyUeSVF.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/IconButton",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,"icon-symbol":"pencil",type:"primary",size:"medium",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"}},"icon-symbol":{...o["icon-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:["small","medium","large"]},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
+      icon-symbol="${t["icon-symbol"]??"circle-dashed"}"
+      type="${t.type??"primary"}"
+      size="${t.size??"medium"}"
+      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 icon-symbol="pencil" type="primary" tooltip="primary" aria-label="primary"></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="pencil"
+        type="primary-clear"
+        tooltip="primary-clear"
+        aria-label="primary-clear"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="pencil"
+        type="primary-stroke"
+        tooltip="primary-stroke"
+        aria-label="primary-stroke"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="pencil"
+        type="secondary"
+        tooltip="secondary"
+        aria-label="secondary"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="pencil"
+        type="secondary-clear"
+        tooltip="secondary-clear"
+        aria-label="secondary-clear"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="pencil"
+        type="secondary-stroke"
+        tooltip="secondary-stroke"
+        aria-label="secondary-stroke"
+      ></btu-icon-button>
+      <btu-icon-button icon-symbol="pencil" type="tertiary" tooltip="tertiary" aria-label="tertiary"></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="pencil"
+        type="tertiary-clear"
+        tooltip="tertiary-clear"
+        aria-label="tertiary-clear"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-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 icon-symbol="pencil" size="small" tooltip="small" aria-label="small"></btu-icon-button>
+      <btu-icon-button icon-symbol="pencil" size="medium" tooltip="medium" aria-label="medium"></btu-icon-button>
+      <btu-icon-button icon-symbol="pencil" size="large" tooltip="large" aria-label="large"></btu-icon-button>
+    </div>
+  `,parameters:{docs:{description:{story:"Available in three sizes: `small`, `medium` (default), and `large`."}}}},r={render:()=>e`
+    <div style="display: flex; gap: 1rem; align-items: center;">
+      <btu-icon-button
+        icon-symbol="trash-2"
+        type="primary"
+        destructive
+        tooltip="Delete (primary)"
+        aria-label="Delete"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="trash-2"
+        type="primary-clear"
+        destructive
+        tooltip="Delete (primary-clear)"
+        aria-label="Delete"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="trash-2"
+        type="secondary"
+        destructive
+        tooltip="Delete (secondary)"
+        aria-label="Delete"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-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."}}}},l={render:()=>e`
+    <div style="display: flex; gap: 2rem; align-items: center; padding: 3rem;">
+      <btu-icon-button
+        icon-symbol="pencil"
+        tooltip="Edit item"
+        tooltip-position="top"
+        aria-label="Edit"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="copy"
+        tooltip="Copy to clipboard"
+        tooltip-position="bottom"
+        aria-label="Copy"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="share-2"
+        tooltip="Share"
+        tooltip-position="left"
+        aria-label="Share"
+        type="secondary"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-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={render:()=>e`
+    <div style="display: flex; gap: 0.5rem; align-items: center;">
+      <btu-icon-button icon-symbol="pencil" type="secondary-clear" tooltip="Edit" aria-label="Edit"></btu-icon-button>
+      <btu-icon-button icon-symbol="copy" type="secondary-clear" tooltip="Copy" aria-label="Copy"></btu-icon-button>
+      <btu-icon-button
+        icon-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
+            icon-symbol="circle-play"
+            type="primary"
+            style="--button-border-radius: 50%"
+            tooltip="Play"
+            aria-label="Play"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-symbol="circle-play"
+            type="secondary"
+            size="large"
+            style="--button-border-radius: 50%"
+            tooltip="Play"
+            aria-label="Play"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-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
+            icon-symbol="bold"
+            type="secondary-clear"
+            size="small"
+            aria-label="Bold"
+            style="--button-border-radius: 0.25rem"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-symbol="italic"
+            type="secondary-clear"
+            size="small"
+            aria-label="Italic"
+            style="--button-border-radius: 0.25rem"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-symbol="underline"
+            type="secondary-clear"
+            size="small"
+            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
+            icon-symbol="align-left"
+            type="secondary-clear"
+            size="small"
+            aria-label="Align left"
+            style="--button-border-radius: 0.25rem"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-symbol="align-center"
+            type="secondary-clear"
+            size="small"
+            aria-label="Align center"
+            style="--button-border-radius: 0.25rem"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-symbol="align-right"
+            type="secondary-clear"
+            size="small"
+            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
+            icon-symbol="x"
+            type="secondary-clear"
+            size="small"
+            tooltip="Cancel"
+            aria-label="Cancel"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-symbol="trash-2"
+            type="primary"
+            destructive
+            size="small"
+            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
+                icon-symbol="refresh-cw"
+                type="secondary-clear"
+                size="small"
+                tooltip="Refresh"
+                aria-label="Refresh"
+              ></btu-icon-button>
+              <btu-icon-button
+                icon-symbol="maximize-2"
+                type="secondary-clear"
+                size="small"
+                tooltip="Expand"
+                aria-label="Expand"
+              ></btu-icon-button>
+              <btu-icon-button
+                icon-symbol="x"
+                type="secondary-clear"
+                size="small"
+                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
+              icon-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
+              icon-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
+              icon-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
+              icon-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 icon-symbol="plus" type="primary" size="small" 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 icon-symbol="plus" type="primary-stroke" size="medium" 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 icon-symbol="plus" type="tertiary" size="large" 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 `small` 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 icon-symbol="pencil" type="primary" tooltip="primary" aria-label="primary"></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="pencil"
+        type="primary-clear"
+        tooltip="primary-clear"
+        aria-label="primary-clear"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="pencil"
+        type="primary-stroke"
+        tooltip="primary-stroke"
+        aria-label="primary-stroke"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="pencil"
+        type="secondary"
+        tooltip="secondary"
+        aria-label="secondary"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="pencil"
+        type="secondary-clear"
+        tooltip="secondary-clear"
+        aria-label="secondary-clear"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="pencil"
+        type="secondary-stroke"
+        tooltip="secondary-stroke"
+        aria-label="secondary-stroke"
+      ></btu-icon-button>
+      <btu-icon-button icon-symbol="pencil" type="tertiary" tooltip="tertiary" aria-label="tertiary"></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="pencil"
+        type="tertiary-clear"
+        tooltip="tertiary-clear"
+        aria-label="tertiary-clear"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-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 icon-symbol="pencil" size="small" tooltip="small" aria-label="small"></btu-icon-button>
+      <btu-icon-button icon-symbol="pencil" size="medium" tooltip="medium" aria-label="medium"></btu-icon-button>
+      <btu-icon-button icon-symbol="pencil" size="large" tooltip="large" aria-label="large"></btu-icon-button>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Available in three sizes: \`small\`, \`medium\` (default), and \`large\`.'
+      }
+    }
+  }
+}`,...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
+        icon-symbol="trash-2"
+        type="primary"
+        destructive
+        tooltip="Delete (primary)"
+        aria-label="Delete"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="trash-2"
+        type="primary-clear"
+        destructive
+        tooltip="Delete (primary-clear)"
+        aria-label="Delete"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="trash-2"
+        type="secondary"
+        destructive
+        tooltip="Delete (secondary)"
+        aria-label="Delete"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-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}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: flex; gap: 2rem; align-items: center; padding: 3rem;">
+      <btu-icon-button
+        icon-symbol="pencil"
+        tooltip="Edit item"
+        tooltip-position="top"
+        aria-label="Edit"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="copy"
+        tooltip="Copy to clipboard"
+        tooltip-position="bottom"
+        aria-label="Copy"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-symbol="share-2"
+        tooltip="Share"
+        tooltip-position="left"
+        aria-label="Share"
+        type="secondary"
+      ></btu-icon-button>
+      <btu-icon-button
+        icon-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.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: flex; gap: 0.5rem; align-items: center;">
+      <btu-icon-button icon-symbol="pencil" type="secondary-clear" tooltip="Edit" aria-label="Edit"></btu-icon-button>
+      <btu-icon-button icon-symbol="copy" type="secondary-clear" tooltip="Copy" aria-label="Copy"></btu-icon-button>
+      <btu-icon-button
+        icon-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.'
+      }
+    }
+  }
+}`,...s.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
+            icon-symbol="circle-play"
+            type="primary"
+            style="--button-border-radius: 50%"
+            tooltip="Play"
+            aria-label="Play"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-symbol="circle-play"
+            type="secondary"
+            size="large"
+            style="--button-border-radius: 50%"
+            tooltip="Play"
+            aria-label="Play"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-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
+            icon-symbol="bold"
+            type="secondary-clear"
+            size="small"
+            aria-label="Bold"
+            style="--button-border-radius: 0.25rem"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-symbol="italic"
+            type="secondary-clear"
+            size="small"
+            aria-label="Italic"
+            style="--button-border-radius: 0.25rem"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-symbol="underline"
+            type="secondary-clear"
+            size="small"
+            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
+            icon-symbol="align-left"
+            type="secondary-clear"
+            size="small"
+            aria-label="Align left"
+            style="--button-border-radius: 0.25rem"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-symbol="align-center"
+            type="secondary-clear"
+            size="small"
+            aria-label="Align center"
+            style="--button-border-radius: 0.25rem"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-symbol="align-right"
+            type="secondary-clear"
+            size="small"
+            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
+            icon-symbol="x"
+            type="secondary-clear"
+            size="small"
+            tooltip="Cancel"
+            aria-label="Cancel"
+          ></btu-icon-button>
+          <btu-icon-button
+            icon-symbol="trash-2"
+            type="primary"
+            destructive
+            size="small"
+            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
+                icon-symbol="refresh-cw"
+                type="secondary-clear"
+                size="small"
+                tooltip="Refresh"
+                aria-label="Refresh"
+              ></btu-icon-button>
+              <btu-icon-button
+                icon-symbol="maximize-2"
+                type="secondary-clear"
+                size="small"
+                tooltip="Expand"
+                aria-label="Expand"
+              ></btu-icon-button>
+              <btu-icon-button
+                icon-symbol="x"
+                type="secondary-clear"
+                size="small"
+                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
+              icon-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
+              icon-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
+              icon-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
+              icon-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 icon-symbol="plus" type="primary" size="small" 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 icon-symbol="plus" type="primary-stroke" size="medium" 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 icon-symbol="plus" type="tertiary" size="large" 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 \\\`small\\\` 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,s as CommonActions,n as Default,r as Destructive,a as Sizes,i as Types,l as WithTooltip,h as __namedExportsOrder,x as default};