@brightspot/ui 1.11.0 → 3.0.1-cms-ui-migration.0

package/dist/storybook/assets/{IconButton.stories-KjN28hfc.js → IconButton.stories-eAU6vNiX.js}

@@ -1,4 +1,4 @@
-import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-B1RdczOE.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:`
+import{g as p,x as e}from"./iframe-D5Uwm8Zd.js";import{o as b}from"./if-defined-C1_PRAyA.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>
@@ -15,11 +15,11 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
 
 <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`
+        `}},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
-      icon-symbol="${t["icon-symbol"]??"circle-dashed"}"
+      symbol="${t.symbol??"circle-dashed"}"
       type="${t.type??"primary"}"
-      size="${t.size??"medium"}"
+      size="${t.size??"md"}"
       aria-label="Edit"
       name=${b(t.name||void 0)}
       tooltip=${b(t.tooltip||void 0)}
@@ -29,46 +29,41 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
     ></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 symbol="pencil" type="primary" tooltip="primary" aria-label="primary"></btu-icon-button>
       <btu-icon-button
-        icon-symbol="pencil"
+        symbol="pencil"
         type="primary-clear"
         tooltip="primary-clear"
         aria-label="primary-clear"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="pencil"
+        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
-        icon-symbol="pencil"
-        type="secondary"
-        tooltip="secondary"
-        aria-label="secondary"
-      ></btu-icon-button>
-      <btu-icon-button
-        icon-symbol="pencil"
+        symbol="pencil"
         type="secondary-clear"
         tooltip="secondary-clear"
         aria-label="secondary-clear"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="pencil"
+        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 symbol="pencil" type="tertiary" tooltip="tertiary" aria-label="tertiary"></btu-icon-button>
       <btu-icon-button
-        icon-symbol="pencil"
+        symbol="pencil"
         type="tertiary-clear"
         tooltip="tertiary-clear"
         aria-label="tertiary-clear"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="pencil"
+        symbol="pencil"
         type="tertiary-stroke"
         tooltip="tertiary-stroke"
         aria-label="tertiary-stroke"
@@ -76,76 +71,71 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
     </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>
+      <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: `small`, `medium` (default), and `large`."}}}},r={render:()=>e`
+  `,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
-        icon-symbol="trash-2"
+        symbol="trash-2"
         type="primary"
         destructive
         tooltip="Delete (primary)"
         aria-label="Delete"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="trash-2"
+        symbol="trash-2"
         type="primary-clear"
         destructive
         tooltip="Delete (primary-clear)"
         aria-label="Delete"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="trash-2"
+        symbol="trash-2"
         type="secondary"
         destructive
         tooltip="Delete (secondary)"
         aria-label="Delete"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="trash-2"
+        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`
+  `,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
-        icon-symbol="pencil"
-        tooltip="Edit item"
-        tooltip-position="top"
-        aria-label="Edit"
-      ></btu-icon-button>
-      <btu-icon-button
-        icon-symbol="copy"
+        symbol="copy"
         tooltip="Copy to clipboard"
         tooltip-position="bottom"
         aria-label="Copy"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="share-2"
+        symbol="share-2"
         tooltip="Share"
         tooltip-position="left"
         aria-label="Share"
         type="secondary"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="download"
+        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`
+  `,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 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 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
-        icon-symbol="trash-2"
+        symbol="trash-2"
         type="secondary-clear"
         destructive
         tooltip="Delete"
@@ -158,22 +148,22 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
         <strong>Custom border radius:</strong>
         <div class="flex items-center gap-3">
           <btu-icon-button
-            icon-symbol="circle-play"
+            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"
+            symbol="circle-play"
             type="secondary"
-            size="large"
+            size="lg"
             style="--button-border-radius: 50%"
             tooltip="Play"
             aria-label="Play"
           ></btu-icon-button>
           <btu-icon-button
-            icon-symbol="settings"
+            symbol="settings"
             type="tertiary-clear"
             style="--button-border-radius: 0"
             tooltip="Settings"
@@ -189,45 +179,45 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
           style="width: fit-content"
         >
           <btu-icon-button
-            icon-symbol="bold"
+            symbol="bold"
             type="secondary-clear"
-            size="small"
+            size="sm"
             aria-label="Bold"
             style="--button-border-radius: 0.25rem"
           ></btu-icon-button>
           <btu-icon-button
-            icon-symbol="italic"
+            symbol="italic"
             type="secondary-clear"
-            size="small"
+            size="sm"
             aria-label="Italic"
             style="--button-border-radius: 0.25rem"
           ></btu-icon-button>
           <btu-icon-button
-            icon-symbol="underline"
+            symbol="underline"
             type="secondary-clear"
-            size="small"
+            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
-            icon-symbol="align-left"
+            symbol="align-left"
             type="secondary-clear"
-            size="small"
+            size="sm"
             aria-label="Align left"
             style="--button-border-radius: 0.25rem"
           ></btu-icon-button>
           <btu-icon-button
-            icon-symbol="align-center"
+            symbol="align-center"
             type="secondary-clear"
-            size="small"
+            size="sm"
             aria-label="Align center"
             style="--button-border-radius: 0.25rem"
           ></btu-icon-button>
           <btu-icon-button
-            icon-symbol="align-right"
+            symbol="align-right"
             type="secondary-clear"
-            size="small"
+            size="sm"
             aria-label="Align right"
             style="--button-border-radius: 0.25rem"
           ></btu-icon-button>
@@ -238,17 +228,17 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
         <strong>Destructive confirmation pair:</strong>
         <div class="flex items-center gap-2">
           <btu-icon-button
-            icon-symbol="x"
+            symbol="x"
             type="secondary-clear"
-            size="small"
+            size="sm"
             tooltip="Cancel"
             aria-label="Cancel"
           ></btu-icon-button>
           <btu-icon-button
-            icon-symbol="trash-2"
+            symbol="trash-2"
             type="primary"
             destructive
-            size="small"
+            size="sm"
             tooltip="Confirm delete"
             aria-label="Confirm delete"
           ></btu-icon-button>
@@ -262,23 +252,23 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
             <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"
+                symbol="refresh-cw"
                 type="secondary-clear"
-                size="small"
+                size="sm"
                 tooltip="Refresh"
                 aria-label="Refresh"
               ></btu-icon-button>
               <btu-icon-button
-                icon-symbol="maximize-2"
+                symbol="maximize-2"
                 type="secondary-clear"
-                size="small"
+                size="sm"
                 tooltip="Expand"
                 aria-label="Expand"
               ></btu-icon-button>
               <btu-icon-button
-                icon-symbol="x"
+                symbol="x"
                 type="secondary-clear"
-                size="small"
+                size="sm"
                 tooltip="Close"
                 aria-label="Close"
               ></btu-icon-button>
@@ -293,7 +283,7 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
         <div class="flex items-end gap-4">
           <div class="flex flex-col items-center gap-1">
             <btu-icon-button
-              icon-symbol="bookmark"
+              symbol="bookmark"
               type="primary"
               aria-label="Bookmark"
               aria-pressed="true"
@@ -303,7 +293,7 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
           </div>
           <div class="flex flex-col items-center gap-1">
             <btu-icon-button
-              icon-symbol="bookmark"
+              symbol="bookmark"
               type="secondary-clear"
               aria-label="Bookmark"
               aria-pressed="false"
@@ -313,7 +303,7 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
           </div>
           <div class="flex flex-col items-center gap-1">
             <btu-icon-button
-              icon-symbol="bell"
+              symbol="bell"
               type="primary"
               aria-label="Notifications on"
               aria-pressed="true"
@@ -323,7 +313,7 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
           </div>
           <div class="flex flex-col items-center gap-1">
             <btu-icon-button
-              icon-symbol="bell-off"
+              symbol="bell-off"
               type="secondary-clear"
               aria-label="Notifications off"
               aria-pressed="false"
@@ -338,21 +328,21 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
         <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>
+            <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 icon-symbol="plus" type="primary-stroke" size="medium" aria-label="Add"></btu-icon-button>
+            <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 icon-symbol="plus" type="tertiary" size="large" aria-label="Add"></btu-icon-button>
+            <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 `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:"\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: {
@@ -363,46 +353,41 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
 }`,...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 symbol="pencil" type="primary" tooltip="primary" aria-label="primary"></btu-icon-button>
       <btu-icon-button
-        icon-symbol="pencil"
+        symbol="pencil"
         type="primary-clear"
         tooltip="primary-clear"
         aria-label="primary-clear"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="pencil"
+        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
-        icon-symbol="pencil"
-        type="secondary"
-        tooltip="secondary"
-        aria-label="secondary"
-      ></btu-icon-button>
-      <btu-icon-button
-        icon-symbol="pencil"
+        symbol="pencil"
         type="secondary-clear"
         tooltip="secondary-clear"
         aria-label="secondary-clear"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="pencil"
+        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 symbol="pencil" type="tertiary" tooltip="tertiary" aria-label="tertiary"></btu-icon-button>
       <btu-icon-button
-        icon-symbol="pencil"
+        symbol="pencil"
         type="tertiary-clear"
         tooltip="tertiary-clear"
         aria-label="tertiary-clear"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="pencil"
+        symbol="pencil"
         type="tertiary-stroke"
         tooltip="tertiary-stroke"
         aria-label="tertiary-stroke"
@@ -419,15 +404,15 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
 }`,...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>
+      <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: \`small\`, \`medium\` (default), and \`large\`.'
+        story: 'Available in three sizes: \`sm\`, \`md\` (default), and \`lg\`.'
       }
     }
   }
@@ -435,28 +420,28 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
   render: () => html\`
     <div style="display: flex; gap: 1rem; align-items: center;">
       <btu-icon-button
-        icon-symbol="trash-2"
+        symbol="trash-2"
         type="primary"
         destructive
         tooltip="Delete (primary)"
         aria-label="Delete"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="trash-2"
+        symbol="trash-2"
         type="primary-clear"
         destructive
         tooltip="Delete (primary-clear)"
         aria-label="Delete"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="trash-2"
+        symbol="trash-2"
         type="secondary"
         destructive
         tooltip="Delete (secondary)"
         aria-label="Delete"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="trash-2"
+        symbol="trash-2"
         type="secondary-stroke"
         destructive
         tooltip="Delete (secondary-stroke)"
@@ -471,30 +456,25 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
       }
     }
   }
-}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+}`,...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
-        icon-symbol="pencil"
-        tooltip="Edit item"
-        tooltip-position="top"
-        aria-label="Edit"
-      ></btu-icon-button>
-      <btu-icon-button
-        icon-symbol="copy"
+        symbol="copy"
         tooltip="Copy to clipboard"
         tooltip-position="bottom"
         aria-label="Copy"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="share-2"
+        symbol="share-2"
         tooltip="Share"
         tooltip-position="left"
         aria-label="Share"
         type="secondary"
       ></btu-icon-button>
       <btu-icon-button
-        icon-symbol="download"
+        symbol="download"
         tooltip="Download"
         tooltip-position="right"
         aria-label="Download"
@@ -509,13 +489,13 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
       }
     }
   }
-}`,...l.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+}`,...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 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 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
-        icon-symbol="trash-2"
+        symbol="trash-2"
         type="secondary-clear"
         destructive
         tooltip="Delete"
@@ -530,29 +510,29 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
       }
     }
   }
-}`,...s.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+}`,...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
-            icon-symbol="circle-play"
+            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"
+            symbol="circle-play"
             type="secondary"
-            size="large"
+            size="lg"
             style="--button-border-radius: 50%"
             tooltip="Play"
             aria-label="Play"
           ></btu-icon-button>
           <btu-icon-button
-            icon-symbol="settings"
+            symbol="settings"
             type="tertiary-clear"
             style="--button-border-radius: 0"
             tooltip="Settings"
@@ -568,45 +548,45 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
           style="width: fit-content"
         >
           <btu-icon-button
-            icon-symbol="bold"
+            symbol="bold"
             type="secondary-clear"
-            size="small"
+            size="sm"
             aria-label="Bold"
             style="--button-border-radius: 0.25rem"
           ></btu-icon-button>
           <btu-icon-button
-            icon-symbol="italic"
+            symbol="italic"
             type="secondary-clear"
-            size="small"
+            size="sm"
             aria-label="Italic"
             style="--button-border-radius: 0.25rem"
           ></btu-icon-button>
           <btu-icon-button
-            icon-symbol="underline"
+            symbol="underline"
             type="secondary-clear"
-            size="small"
+            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
-            icon-symbol="align-left"
+            symbol="align-left"
             type="secondary-clear"
-            size="small"
+            size="sm"
             aria-label="Align left"
             style="--button-border-radius: 0.25rem"
           ></btu-icon-button>
           <btu-icon-button
-            icon-symbol="align-center"
+            symbol="align-center"
             type="secondary-clear"
-            size="small"
+            size="sm"
             aria-label="Align center"
             style="--button-border-radius: 0.25rem"
           ></btu-icon-button>
           <btu-icon-button
-            icon-symbol="align-right"
+            symbol="align-right"
             type="secondary-clear"
-            size="small"
+            size="sm"
             aria-label="Align right"
             style="--button-border-radius: 0.25rem"
           ></btu-icon-button>
@@ -617,17 +597,17 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
         <strong>Destructive confirmation pair:</strong>
         <div class="flex items-center gap-2">
           <btu-icon-button
-            icon-symbol="x"
+            symbol="x"
             type="secondary-clear"
-            size="small"
+            size="sm"
             tooltip="Cancel"
             aria-label="Cancel"
           ></btu-icon-button>
           <btu-icon-button
-            icon-symbol="trash-2"
+            symbol="trash-2"
             type="primary"
             destructive
-            size="small"
+            size="sm"
             tooltip="Confirm delete"
             aria-label="Confirm delete"
           ></btu-icon-button>
@@ -641,23 +621,23 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
             <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"
+                symbol="refresh-cw"
                 type="secondary-clear"
-                size="small"
+                size="sm"
                 tooltip="Refresh"
                 aria-label="Refresh"
               ></btu-icon-button>
               <btu-icon-button
-                icon-symbol="maximize-2"
+                symbol="maximize-2"
                 type="secondary-clear"
-                size="small"
+                size="sm"
                 tooltip="Expand"
                 aria-label="Expand"
               ></btu-icon-button>
               <btu-icon-button
-                icon-symbol="x"
+                symbol="x"
                 type="secondary-clear"
-                size="small"
+                size="sm"
                 tooltip="Close"
                 aria-label="Close"
               ></btu-icon-button>
@@ -672,7 +652,7 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
         <div class="flex items-end gap-4">
           <div class="flex flex-col items-center gap-1">
             <btu-icon-button
-              icon-symbol="bookmark"
+              symbol="bookmark"
               type="primary"
               aria-label="Bookmark"
               aria-pressed="true"
@@ -682,7 +662,7 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
           </div>
           <div class="flex flex-col items-center gap-1">
             <btu-icon-button
-              icon-symbol="bookmark"
+              symbol="bookmark"
               type="secondary-clear"
               aria-label="Bookmark"
               aria-pressed="false"
@@ -692,7 +672,7 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
           </div>
           <div class="flex flex-col items-center gap-1">
             <btu-icon-button
-              icon-symbol="bell"
+              symbol="bell"
               type="primary"
               aria-label="Notifications on"
               aria-pressed="true"
@@ -702,7 +682,7 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
           </div>
           <div class="flex flex-col items-center gap-1">
             <btu-icon-button
-              icon-symbol="bell-off"
+              symbol="bell-off"
               type="secondary-clear"
               aria-label="Notifications off"
               aria-pressed="false"
@@ -717,15 +697,15 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
         <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>
+            <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 icon-symbol="plus" type="primary-stroke" size="medium" aria-label="Add"></btu-icon-button>
+            <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 icon-symbol="plus" type="tertiary" size="large" aria-label="Add"></btu-icon-button>
+            <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>
@@ -737,7 +717,7 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
       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.
+- **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.
@@ -745,4 +725,4 @@ import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as b}from"./if-defined-
       }
     }
   }
-}`,...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};
+}`,...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};