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

package/dist/storybook/assets/{ActionBar.stories--nAeDC-G.js → ActionBar.stories-CXEvFUN5.js}

@@ -1,4 +1,4 @@
-import{g as p,x as e}from"./iframe-DloIUNZz.js";import{o as u}from"./style-map-DLXysq3r.js";import"./preload-helper-PPVm8Dsz.js";const{events:v,args:y,argTypes:a}=p("btu-action-bar"),x={title:"Components/Action Bar",component:"btu-action-bar",tags:["autodocs"],parameters:{docs:{subtitle:"A persistent container for primary, secondary, tertiary, and destructive actions",description:{component:`
+import{g as p,x as e}from"./iframe-D5Uwm8Zd.js";import{o as u}from"./style-map-Cy6U2K_U.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:v,argTypes:a}=p("btu-action-bar"),x={title:"Components/Action Bar",component:"btu-action-bar",tags:["autodocs"],parameters:{docs:{subtitle:"A persistent container for primary, secondary, tertiary, and destructive actions",description:{component:`
 ActionBar provides a horizontal bar for grouping action buttons, typically anchored to the bottom of a view.
 
 <h3>Two-Zone Layout:</h3>
@@ -17,7 +17,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
   <li><strong>Tab</strong> — Exit toolbar</li>
   <li><strong>Initial focus</strong> — Lands on the first item in visual order per WAI-ARIA toolbar conventions, not the primary action. Arrow keys reach any item quickly.</li>
 </ul>
-        `}},actions:{handles:v},controls:{expanded:!0}},args:{...y,label:"Content actions",position:"bottom","item-alignment":"default",shadow:!1,sticky:!1,compact:!1},argTypes:{...a,"--action-bar-gap":{table:{disable:!0}},"--action-bar-padding":{table:{disable:!0}},"--action-bar-background":{table:{disable:!0}},"--action-bar-border-color":{table:{disable:!0}},"--action-bar-z-index":{table:{disable:!0}},label:{...a.label,control:{type:"text"},description:"Accessible label for the toolbar region"},position:{...a.position,control:{type:"select"},options:["top","bottom"],description:"Bar position (top or bottom). Use with `sticky` for sticky behavior."},sticky:{...a.sticky,control:{type:"boolean"},description:"CSS sticky positioning (combines with position for direction)"},"item-alignment":{...a["item-alignment"],control:{type:"select"},options:["default","start","center","end"],description:"Content alignment (non-default disables two-zone layout)"},shadow:{...a.shadow,control:{type:"boolean"},description:"Adds a box-shadow"},compact:{...a.compact,control:{type:"boolean"},description:"Progressive label compacting before overflow (items need `compactable`)"},customGap:{name:"--action-bar-gap",control:{type:"text"},description:"Gap between items (default: 0.75rem)",table:{category:"CSS Properties"}},customPadding:{name:"--action-bar-padding",control:{type:"text"},description:"Bar padding (default: 1.5rem)",table:{category:"CSS Properties"}},customBackground:{name:"--action-bar-background",control:{type:"color"},description:"Background color",table:{category:"CSS Properties"}},customBorderColor:{name:"--action-bar-border-color",control:{type:"color"},description:"Border color",table:{category:"CSS Properties"}}},render:t=>{const i={};return t.customGap&&(i["--action-bar-gap"]=t.customGap),t.customPadding&&(i["--action-bar-padding"]=t.customPadding),t.customBackground&&(i["--action-bar-background"]=t.customBackground),t.customBorderColor&&(i["--action-bar-border-color"]=t.customBorderColor),e`
+        `}},actions:{handles:y},controls:{expanded:!0}},args:{...v,label:"Content actions",position:"bottom","item-alignment":"default",shadow:!1,sticky:!1,compact:!1},argTypes:{...a,"--action-bar-gap":{table:{disable:!0}},"--action-bar-padding":{table:{disable:!0}},"--action-bar-background":{table:{disable:!0}},"--action-bar-border-color":{table:{disable:!0}},"--action-bar-z-index":{table:{disable:!0}},label:{...a.label,control:{type:"text"},description:"Accessible label for the toolbar region"},position:{...a.position,control:{type:"select"},options:["top","bottom"],description:"Bar position (top or bottom). Use with `sticky` for sticky behavior."},sticky:{...a.sticky,control:{type:"boolean"},description:"CSS sticky positioning (combines with position for direction)"},"item-alignment":{...a["item-alignment"],control:{type:"select"},options:["default","start","center","end"],description:"Content alignment (non-default disables two-zone layout)"},shadow:{...a.shadow,control:{type:"boolean"},description:"Adds a box-shadow"},compact:{...a.compact,control:{type:"boolean"},description:"Progressive label compacting before overflow (items need `compactable`)"},customGap:{name:"--action-bar-gap",control:{type:"text"},description:"Gap between items (default: 0.75rem)",table:{category:"css properties"}},customPadding:{name:"--action-bar-padding",control:{type:"text"},description:"Bar padding (default: 1.5rem)",table:{category:"css properties"}},customBackground:{name:"--action-bar-background",control:{type:"color"},description:"Background color",table:{category:"css properties"}},customBorderColor:{name:"--action-bar-border-color",control:{type:"color"},description:"Border color",table:{category:"css properties"}}},render:t=>{const o={};return t.customGap&&(o["--action-bar-gap"]=t.customGap),t.customPadding&&(o["--action-bar-padding"]=t.customPadding),t.customBackground&&(o["--action-bar-background"]=t.customBackground),t.customBorderColor&&(o["--action-bar-border-color"]=t.customBorderColor),e`
       <btu-action-bar
         label="${t.label}"
         position="${t.position}"
@@ -25,27 +25,27 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
         item-alignment="${t["item-alignment"]}"
         ?shadow="${t.shadow}"
         ?compact="${t.compact}"
-        style=${u(i)}
+        style=${u(o)}
       >
         <btu-action-item
           zone="start"
           variant="destructive"
           label="Permanently Delete"
-          icon-name="trash-2"
+          symbol="trash-2"
         ></btu-action-item>
         <btu-action-item zone="end" variant="secondary" label="Cancel"></btu-action-item>
         <btu-action-item zone="end" variant="primary" label="Save Changes"></btu-action-item>
       </btu-action-bar>
-    `}},o={args:{}},n={render:()=>e`
+    `}},i={args:{}},r={render:()=>e`
     <div class="flex flex-col gap-4">
       <div>
         <p class="mb-2 text-sm font-medium text-gray-500">
           Default alignment — items auto-sorted: tertiary → secondary → primary (left to right)
         </p>
         <btu-action-bar label="Auto-sorted default">
-          <btu-action-item variant="primary" label="Publish" icon-name="send"></btu-action-item>
-          <btu-action-item variant="tertiary" label="Preview" icon-name="eye"></btu-action-item>
-          <btu-action-item variant="secondary" label="Save Draft" icon-name="file-text"></btu-action-item>
+          <btu-action-item variant="primary" label="Publish" symbol="send"></btu-action-item>
+          <btu-action-item variant="tertiary" label="Preview" symbol="eye"></btu-action-item>
+          <btu-action-item variant="secondary" label="Save Draft" symbol="file-text"></btu-action-item>
         </btu-action-bar>
       </div>
       <div>
@@ -53,9 +53,9 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
           Start alignment — items auto-sorted: primary → secondary → tertiary (left to right)
         </p>
         <btu-action-bar label="Auto-sorted start" item-alignment="start">
-          <btu-action-item variant="tertiary" label="Preview" icon-name="eye"></btu-action-item>
-          <btu-action-item variant="primary" label="Publish" icon-name="send"></btu-action-item>
-          <btu-action-item variant="secondary" label="Save Draft" icon-name="file-text"></btu-action-item>
+          <btu-action-item variant="tertiary" label="Preview" symbol="eye"></btu-action-item>
+          <btu-action-item variant="primary" label="Publish" symbol="send"></btu-action-item>
+          <btu-action-item variant="secondary" label="Save Draft" symbol="file-text"></btu-action-item>
         </btu-action-bar>
       </div>
       <div>
@@ -63,19 +63,19 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
           Same variant (4 secondary) — stable sort preserves author DOM order within group
         </p>
         <btu-action-bar label="Same variant sorting">
-          <btu-action-item variant="secondary" label="First" icon-name="hash"></btu-action-item>
-          <btu-action-item variant="secondary" label="Second" icon-name="hash"></btu-action-item>
-          <btu-action-item variant="secondary" label="Third" icon-name="hash"></btu-action-item>
-          <btu-action-item variant="primary" label="Save" icon-name="save"></btu-action-item>
+          <btu-action-item variant="secondary" label="First" symbol="hash"></btu-action-item>
+          <btu-action-item variant="secondary" label="Second" symbol="hash"></btu-action-item>
+          <btu-action-item variant="secondary" label="Third" symbol="hash"></btu-action-item>
+          <btu-action-item variant="primary" label="Save" symbol="save"></btu-action-item>
         </btu-action-bar>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:"Items are automatically sorted by variant priority regardless of authored DOM order. In default/end/center alignment, primary is rightmost. In start alignment, primary is leftmost. Items with the same variant maintain their author order."}}}},r={render:()=>e`
+  `,parameters:{docs:{description:{story:"Items are automatically sorted by variant priority regardless of authored DOM order. In default/end/center alignment, primary is rightmost. In start alignment, primary is leftmost. Items with the same variant maintain their author order."}}}},n={render:()=>e`
     <div class="flex flex-col gap-4">
       <div>
         <p class="mb-2 text-sm font-medium text-gray-500">item-alignment="default" (two-zone layout)</p>
         <btu-action-bar label="Default alignment">
-          <btu-action-item zone="start" variant="destructive" label="Delete" icon-name="trash-2"></btu-action-item>
+          <btu-action-item zone="start" variant="destructive" label="Delete" symbol="trash-2"></btu-action-item>
           <btu-action-item zone="end" variant="primary" label="Save"></btu-action-item>
         </btu-action-bar>
       </div>
@@ -101,7 +101,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
         </btu-action-bar>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:'The `item-alignment` attribute controls content positioning. The default "two-zone" layout separates start and end items; other alignments place all items together. Items are auto-sorted by variant priority.'}}}},c={render:()=>e`
+  `,parameters:{docs:{description:{story:'The `item-alignment` attribute controls content positioning. The default "two-zone" layout separates start and end items; other alignments place all items together. Items are auto-sorted by variant priority.'}}}},s={render:()=>e`
     <div class="flex flex-wrap gap-4">
       <div class="flex h-[300px] w-[300px] flex-col rounded-lg border border-gray-200">
         <div class="flex-1 p-4 text-sm text-gray-500">position="bottom" (default)</div>
@@ -132,42 +132,42 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
         </div>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:"Position variants: `bottom` (default, margin-top: auto), `top` (margin-bottom: auto). The `sticky` attribute enables CSS sticky positioning — combine with `position` for direction."}}}},s={render:()=>e`
+  `,parameters:{docs:{description:{story:"Position variants: `bottom` (default, margin-top: auto), `top` (margin-bottom: auto). The `sticky` attribute enables CSS sticky positioning — combine with `position` for direction."}}}},l={render:()=>e`
     <btu-action-bar label="Shadow bar" shadow>
       <btu-action-item zone="end" variant="secondary" label="Cancel"></btu-action-item>
       <btu-action-item zone="end" variant="primary" label="Save Changes"></btu-action-item>
     </btu-action-bar>
-  `,parameters:{docs:{description:{story:"The `shadow` attribute adds a box-shadow to the bar for visual elevation."}}}},l={render:()=>e`
+  `,parameters:{docs:{description:{story:"The `shadow` attribute adds a box-shadow to the bar for visual elevation."}}}},c={render:()=>e`
     <div
       style="width: 400px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
     >
       <btu-action-bar label="Overflow demo">
-        <btu-action-item zone="start" variant="destructive" label="Delete" icon-name="trash-2"></btu-action-item>
-        <btu-action-item zone="end" variant="tertiary" label="Preview" icon-name="eye"></btu-action-item>
-        <btu-action-item zone="end" variant="secondary" label="Save Draft" icon-name="file-text"></btu-action-item>
-        <btu-action-item zone="end" variant="primary" label="Publish" icon-name="send"></btu-action-item>
+        <btu-action-item zone="start" variant="destructive" label="Delete" symbol="trash-2"></btu-action-item>
+        <btu-action-item zone="end" variant="tertiary" label="Preview" symbol="eye"></btu-action-item>
+        <btu-action-item zone="end" variant="secondary" label="Save Draft" symbol="file-text"></btu-action-item>
+        <btu-action-item zone="end" variant="primary" label="Publish" symbol="send"></btu-action-item>
       </btu-action-bar>
     </div>
-  `,parameters:{docs:{description:{story:`When items don't fit, the least important overflow first into a "More" dropdown. Resize to see: tertiary "Preview" overflows before secondary "Save Draft", which overflows before primary "Publish".`}}}},m={render:()=>e`
+  `,parameters:{docs:{description:{story:`When items don't fit, the least important overflow first into a "More" dropdown. Resize to see: tertiary "Preview" overflows before secondary "Save Draft", which overflows before primary "Publish".`}}}},b={render:()=>e`
     <div
       style="width: 600px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
     >
       <btu-action-bar label="Progressive compact demo" compact>
-        <btu-action-item zone="start" variant="destructive" label="Delete" icon-name="trash-2"></btu-action-item>
-        <btu-action-item variant="tertiary" label="Preview" icon-name="eye" compactable></btu-action-item>
-        <btu-action-item variant="secondary" label="Save Draft" icon-name="file-text" compactable></btu-action-item>
-        <btu-action-item variant="primary" label="Publish" icon-name="send" compactable></btu-action-item>
+        <btu-action-item zone="start" variant="destructive" label="Delete" symbol="trash-2"></btu-action-item>
+        <btu-action-item variant="tertiary" label="Preview" symbol="eye" compactable></btu-action-item>
+        <btu-action-item variant="secondary" label="Save Draft" symbol="file-text" compactable></btu-action-item>
+        <btu-action-item variant="primary" label="Publish" symbol="send" compactable></btu-action-item>
       </btu-action-bar>
     </div>
-  `,parameters:{docs:{description:{story:'With `compact` on the bar and `compactable` on items, labels progressively compact to icon-only mode (least important first) before overflowing. Resize the container to see:\n1. Tertiary "Preview" compacts first\n2. Then secondary "Save Draft" compacts\n3. Then primary "Publish" compacts\n4. Finally items overflow into "More" dropdown'}}}},b={render:()=>e`
+  `,parameters:{docs:{description:{story:'With `compact` on the bar and `compactable` on items, labels progressively compact to icon-only mode (least important first) before overflowing. Resize the container to see:\n1. Tertiary "Preview" compacts first\n2. Then secondary "Save Draft" compacts\n3. Then primary "Publish" compacts\n4. Finally items overflow into "More" dropdown'}}}},m={render:()=>e`
     <div
       style="width: 500px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
     >
       <btu-action-bar label="Mixed compactable" compact>
         <btu-action-item variant="tertiary" label="Help"></btu-action-item>
-        <btu-action-item variant="tertiary" label="Preview" icon-name="eye" compactable></btu-action-item>
-        <btu-action-item variant="secondary" label="Save Draft" icon-name="file-text" compactable></btu-action-item>
-        <btu-action-item variant="primary" label="Publish" icon-name="send"></btu-action-item>
+        <btu-action-item variant="tertiary" label="Preview" symbol="eye" compactable></btu-action-item>
+        <btu-action-item variant="secondary" label="Save Draft" symbol="file-text" compactable></btu-action-item>
+        <btu-action-item variant="primary" label="Publish" symbol="send"></btu-action-item>
       </btu-action-bar>
     </div>
   `,parameters:{docs:{description:{story:'Items without `compactable` (or without an icon) skip the compact phase and go directly to overflow. Here, "Help" (no icon) and "Publish" (not marked compactable) never compact — only "Preview" and "Save Draft" can.'}}}},d={render:()=>e`
@@ -179,9 +179,9 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       <btu-action-item zone="end" variant="secondary" label="Cancel"></btu-action-item>
       <btu-action-item zone="end" variant="primary" label="Save Changes"></btu-action-item>
     </btu-action-bar>
-  `,parameters:{docs:{description:{story:"CSS custom properties allow full visual customization of the bar. Use the controls panel to experiment with `--action-bar-*` properties."}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  `,parameters:{docs:{description:{story:"CSS custom properties allow full visual customization of the bar. Use the controls panel to experiment with `--action-bar-*` properties."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
   args: {}
-}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+}`,...i.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-col gap-4">
       <div>
@@ -189,9 +189,9 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
           Default alignment — items auto-sorted: tertiary → secondary → primary (left to right)
         </p>
         <btu-action-bar label="Auto-sorted default">
-          <btu-action-item variant="primary" label="Publish" icon-name="send"></btu-action-item>
-          <btu-action-item variant="tertiary" label="Preview" icon-name="eye"></btu-action-item>
-          <btu-action-item variant="secondary" label="Save Draft" icon-name="file-text"></btu-action-item>
+          <btu-action-item variant="primary" label="Publish" symbol="send"></btu-action-item>
+          <btu-action-item variant="tertiary" label="Preview" symbol="eye"></btu-action-item>
+          <btu-action-item variant="secondary" label="Save Draft" symbol="file-text"></btu-action-item>
         </btu-action-bar>
       </div>
       <div>
@@ -199,9 +199,9 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
           Start alignment — items auto-sorted: primary → secondary → tertiary (left to right)
         </p>
         <btu-action-bar label="Auto-sorted start" item-alignment="start">
-          <btu-action-item variant="tertiary" label="Preview" icon-name="eye"></btu-action-item>
-          <btu-action-item variant="primary" label="Publish" icon-name="send"></btu-action-item>
-          <btu-action-item variant="secondary" label="Save Draft" icon-name="file-text"></btu-action-item>
+          <btu-action-item variant="tertiary" label="Preview" symbol="eye"></btu-action-item>
+          <btu-action-item variant="primary" label="Publish" symbol="send"></btu-action-item>
+          <btu-action-item variant="secondary" label="Save Draft" symbol="file-text"></btu-action-item>
         </btu-action-bar>
       </div>
       <div>
@@ -209,10 +209,10 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
           Same variant (4 secondary) — stable sort preserves author DOM order within group
         </p>
         <btu-action-bar label="Same variant sorting">
-          <btu-action-item variant="secondary" label="First" icon-name="hash"></btu-action-item>
-          <btu-action-item variant="secondary" label="Second" icon-name="hash"></btu-action-item>
-          <btu-action-item variant="secondary" label="Third" icon-name="hash"></btu-action-item>
-          <btu-action-item variant="primary" label="Save" icon-name="save"></btu-action-item>
+          <btu-action-item variant="secondary" label="First" symbol="hash"></btu-action-item>
+          <btu-action-item variant="secondary" label="Second" symbol="hash"></btu-action-item>
+          <btu-action-item variant="secondary" label="Third" symbol="hash"></btu-action-item>
+          <btu-action-item variant="primary" label="Save" symbol="save"></btu-action-item>
         </btu-action-bar>
       </div>
     </div>
@@ -224,13 +224,13 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+}`,...r.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-col gap-4">
       <div>
         <p class="mb-2 text-sm font-medium text-gray-500">item-alignment="default" (two-zone layout)</p>
         <btu-action-bar label="Default alignment">
-          <btu-action-item zone="start" variant="destructive" label="Delete" icon-name="trash-2"></btu-action-item>
+          <btu-action-item zone="start" variant="destructive" label="Delete" symbol="trash-2"></btu-action-item>
           <btu-action-item zone="end" variant="primary" label="Save"></btu-action-item>
         </btu-action-bar>
       </div>
@@ -264,7 +264,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...r.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-wrap gap-4">
       <div class="flex h-[300px] w-[300px] flex-col rounded-lg border border-gray-200">
@@ -304,7 +304,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...c.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\`
     <btu-action-bar label="Shadow bar" shadow>
       <btu-action-item zone="end" variant="secondary" label="Cancel"></btu-action-item>
@@ -318,16 +318,16 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+}`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div
       style="width: 400px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
     >
       <btu-action-bar label="Overflow demo">
-        <btu-action-item zone="start" variant="destructive" label="Delete" icon-name="trash-2"></btu-action-item>
-        <btu-action-item zone="end" variant="tertiary" label="Preview" icon-name="eye"></btu-action-item>
-        <btu-action-item zone="end" variant="secondary" label="Save Draft" icon-name="file-text"></btu-action-item>
-        <btu-action-item zone="end" variant="primary" label="Publish" icon-name="send"></btu-action-item>
+        <btu-action-item zone="start" variant="destructive" label="Delete" symbol="trash-2"></btu-action-item>
+        <btu-action-item zone="end" variant="tertiary" label="Preview" symbol="eye"></btu-action-item>
+        <btu-action-item zone="end" variant="secondary" label="Save Draft" symbol="file-text"></btu-action-item>
+        <btu-action-item zone="end" variant="primary" label="Publish" symbol="send"></btu-action-item>
       </btu-action-bar>
     </div>
   \`,
@@ -338,16 +338,16 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...l.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+}`,...c.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div
       style="width: 600px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
     >
       <btu-action-bar label="Progressive compact demo" compact>
-        <btu-action-item zone="start" variant="destructive" label="Delete" icon-name="trash-2"></btu-action-item>
-        <btu-action-item variant="tertiary" label="Preview" icon-name="eye" compactable></btu-action-item>
-        <btu-action-item variant="secondary" label="Save Draft" icon-name="file-text" compactable></btu-action-item>
-        <btu-action-item variant="primary" label="Publish" icon-name="send" compactable></btu-action-item>
+        <btu-action-item zone="start" variant="destructive" label="Delete" symbol="trash-2"></btu-action-item>
+        <btu-action-item variant="tertiary" label="Preview" symbol="eye" compactable></btu-action-item>
+        <btu-action-item variant="secondary" label="Save Draft" symbol="file-text" compactable></btu-action-item>
+        <btu-action-item variant="primary" label="Publish" symbol="send" compactable></btu-action-item>
       </btu-action-bar>
     </div>
   \`,
@@ -362,16 +362,16 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...m.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+}`,...b.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div
       style="width: 500px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
     >
       <btu-action-bar label="Mixed compactable" compact>
         <btu-action-item variant="tertiary" label="Help"></btu-action-item>
-        <btu-action-item variant="tertiary" label="Preview" icon-name="eye" compactable></btu-action-item>
-        <btu-action-item variant="secondary" label="Save Draft" icon-name="file-text" compactable></btu-action-item>
-        <btu-action-item variant="primary" label="Publish" icon-name="send"></btu-action-item>
+        <btu-action-item variant="tertiary" label="Preview" symbol="eye" compactable></btu-action-item>
+        <btu-action-item variant="secondary" label="Save Draft" symbol="file-text" compactable></btu-action-item>
+        <btu-action-item variant="primary" label="Publish" symbol="send"></btu-action-item>
       </btu-action-bar>
     </div>
   \`,
@@ -382,7 +382,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...b.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+}`,...m.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-action-bar
       label="Custom styled"
@@ -405,4 +405,4 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...d.parameters?.docs?.source}}};const w=["Default","AutoSort","Alignments","Positions","Shadow","Overflow","ProgressiveCompact","MixedCompactable","CustomStyling"];export{r as Alignments,n as AutoSort,d as CustomStyling,o as Default,b as MixedCompactable,l as Overflow,c as Positions,m as ProgressiveCompact,s as Shadow,w as __namedExportsOrder,x as default};
+}`,...d.parameters?.docs?.source}}};const w=["Default","AutoSort","Alignments","Positions","Shadow","Overflow","ProgressiveCompact","MixedCompactable","CustomStyling"];export{n as Alignments,r as AutoSort,d as CustomStyling,i as Default,m as MixedCompactable,c as Overflow,s as Positions,b as ProgressiveCompact,l as Shadow,w as __namedExportsOrder,x as default};

package/dist/storybook/assets/{ActionItem.stories-BHrGjk-P.js → ActionItem.stories-8-qQmVGz.js}

@@ -1,4 +1,4 @@
-import{g as b,x as a}from"./iframe-DloIUNZz.js";import{o as d}from"./style-map-DLXysq3r.js";import"./preload-helper-PPVm8Dsz.js";const{events:m,args:u,argTypes:e}=b("btu-action-item"),g={title:"Components/Action Bar/Action Item",component:"btu-action-item",tags:["autodocs"],parameters:{docs:{subtitle:"A button element for use within an ActionBar",description:{component:`
+import{g as d,x as a}from"./iframe-D5Uwm8Zd.js";import{o as b}from"./style-map-Cy6U2K_U.js";import"./preload-helper-PPVm8Dsz.js";const{events:m,args:u,argTypes:e}=d("btu-action-item"),g={title:"Components/Action Bar/Action Item",component:"btu-action-item",tags:["autodocs"],parameters:{docs:{subtitle:"A button element for use within an ActionBar",description:{component:`
 ActionItem renders a styled button using existing \`btu-button-*\` classes. It supports four visual variants — primary, secondary, tertiary, and destructive — along with optional icons, icon-only mode, loading state, and disabled state.
 
 <h3>Standalone vs. Inside ActionBar:</h3>
@@ -6,19 +6,19 @@ ActionItem renders a styled button using existing \`btu-button-*\` classes. It s
 
 <h3>CSS Customization:</h3>
 <p>Set <code>--button-*</code> CSS custom properties on the element or a parent to customize colors and border-radius via CSS inheritance.</p>
-        `}},actions:{handles:m},controls:{expanded:!0}},args:{...u,label:"Action Item",variant:"secondary","icon-name":"","icon-only":!1,disabled:!1,loading:!1,zone:"",compactable:!1},argTypes:{...e,"--button-color":{table:{disable:!0}},"--button-text-color":{table:{disable:!0}},"--button-border-radius":{table:{disable:!0}},label:{...e.label,control:{type:"text"},description:"Button label text"},variant:{...e.variant,control:{type:"select"},options:["primary","secondary","tertiary","destructive"],description:"Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'"},"icon-name":{...e["icon-name"],control:{type:"text"},description:"Lucide icon name for the leading icon"},"icon-only":{...e["icon-only"],control:{type:"boolean"},description:"Show icon only, hiding the label. Tooltip activates automatically."},disabled:{...e.disabled,control:{type:"boolean"},description:"Disables the action item (remains focusable via aria-disabled)"},loading:{...e.loading,control:{type:"boolean"},description:"Shows a loading spinner and prevents interaction"},zone:{...e.zone,control:{type:"select"},options:["","start","end"],description:"Zone placement for ActionBar two-zone layout. Only effective inside a btu-action-bar."},compactable:{...e.compactable,control:{type:"boolean"},description:"Opt-in for progressive label compacting. Only effective inside a btu-action-bar with `compact`."},buttonColor:{name:"--button-color",control:{type:"color"},description:"Override button background color",table:{category:"CSS Properties"}},buttonTextColor:{name:"--button-text-color",control:{type:"color"},description:"Override button text color",table:{category:"CSS Properties"}},buttonBorderRadius:{name:"--button-border-radius",control:{type:"text"},description:"Override button border radius",table:{category:"CSS Properties"}}},render:t=>{const i={};return t.buttonColor&&(i["--button-color"]=t.buttonColor),t.buttonTextColor&&(i["--button-text-color"]=t.buttonTextColor),t.buttonBorderRadius&&(i["--button-border-radius"]=t.buttonBorderRadius),a`
+        `}},actions:{handles:m},controls:{expanded:!0}},args:{...u,label:"Action Item",variant:"secondary",symbol:"","icon-only":!1,disabled:!1,loading:!1,zone:"",compactable:!1},argTypes:{...e,"--button-color":{table:{disable:!0}},"--button-text-color":{table:{disable:!0}},"--button-border-radius":{table:{disable:!0}},label:{...e.label,control:{type:"text"},description:"Button label text"},variant:{...e.variant,control:{type:"select"},options:["primary","secondary","tertiary","destructive"],description:"Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'"},symbol:{...e.symbol,control:{type:"text"},description:"Lucide icon name for the leading icon"},"icon-only":{...e["icon-only"],control:{type:"boolean"},description:"Show icon only, hiding the label. Tooltip activates automatically."},disabled:{...e.disabled,control:{type:"boolean"},description:"Disables the action item (remains focusable via aria-disabled)"},loading:{...e.loading,control:{type:"boolean"},description:"Shows a loading spinner and prevents interaction"},zone:{...e.zone,control:{type:"select"},options:["","start","end"],description:"Zone placement for ActionBar two-zone layout. Only effective inside a btu-action-bar."},compactable:{...e.compactable,control:{type:"boolean"},description:"Opt-in for progressive label compacting. Only effective inside a btu-action-bar with `compact`."},buttonColor:{name:"--button-color",control:{type:"color"},description:"Override button background color",table:{category:"css properties"}},buttonTextColor:{name:"--button-text-color",control:{type:"color"},description:"Override button text color",table:{category:"css properties"}},buttonBorderRadius:{name:"--button-border-radius",control:{type:"text"},description:"Override button border radius",table:{category:"css properties"}}},render:t=>{const i={};return t.buttonColor&&(i["--button-color"]=t.buttonColor),t.buttonTextColor&&(i["--button-text-color"]=t.buttonTextColor),t.buttonBorderRadius&&(i["--button-border-radius"]=t.buttonBorderRadius),a`
       <btu-action-item
         label="${t.label}"
         variant="${t.variant}"
-        icon-name="${t["icon-name"]}"
+        symbol="${t.symbol}"
         ?icon-only="${t["icon-only"]}"
         ?disabled="${t.disabled}"
         ?loading="${t.loading}"
         zone="${t.zone}"
         ?compactable="${t.compactable}"
-        style=${d(i)}
+        style=${b(i)}
       ></btu-action-item>
-    `}},n={args:{}},o={render:()=>a`
+    `}},o={args:{}},n={render:()=>a`
     <div class="flex items-center gap-4">
       <btu-action-item variant="primary" label="Primary"></btu-action-item>
       <btu-action-item variant="secondary" label="Secondary"></btu-action-item>
@@ -27,19 +27,19 @@ ActionItem renders a styled button using existing \`btu-button-*\` classes. It s
     </div>
   `,parameters:{docs:{description:{story:"All four visual variants side by side. Each maps to `btu-button-*` classes from the button Tailwind plugin."}}}},r={render:()=>a`
     <div class="flex items-center gap-4">
-      <btu-action-item variant="primary" label="Publish" icon-name="send"></btu-action-item>
-      <btu-action-item variant="secondary" label="Save Draft" icon-name="file-text"></btu-action-item>
-      <btu-action-item variant="tertiary" label="Preview" icon-name="eye"></btu-action-item>
-      <btu-action-item variant="destructive" label="Delete" icon-name="trash-2"></btu-action-item>
+      <btu-action-item variant="primary" label="Publish" symbol="send"></btu-action-item>
+      <btu-action-item variant="secondary" label="Save Draft" symbol="file-text"></btu-action-item>
+      <btu-action-item variant="tertiary" label="Preview" symbol="eye"></btu-action-item>
+      <btu-action-item variant="destructive" label="Delete" symbol="trash-2"></btu-action-item>
     </div>
-  `,parameters:{docs:{description:{story:"Each variant with a leading Lucide icon. Set the `icon-name` attribute to any Lucide icon name."}}}},c={render:()=>a`
+  `,parameters:{docs:{description:{story:"Each variant with a leading Lucide icon. Set the `symbol` attribute to any Lucide icon name."}}}},s={render:()=>a`
     <div class="flex items-center gap-4">
-      <btu-action-item variant="primary" label="Save" icon-name="save" icon-only></btu-action-item>
-      <btu-action-item variant="secondary" label="Settings" icon-name="settings" icon-only></btu-action-item>
-      <btu-action-item variant="tertiary" label="Preview" icon-name="eye" icon-only></btu-action-item>
-      <btu-action-item variant="destructive" label="Delete" icon-name="trash-2" icon-only></btu-action-item>
+      <btu-action-item variant="primary" label="Save" symbol="save" icon-only></btu-action-item>
+      <btu-action-item variant="secondary" label="Settings" symbol="settings" icon-only></btu-action-item>
+      <btu-action-item variant="tertiary" label="Preview" symbol="eye" icon-only></btu-action-item>
+      <btu-action-item variant="destructive" label="Delete" symbol="trash-2" icon-only></btu-action-item>
     </div>
-  `,parameters:{docs:{description:{story:"Icon-only mode hides the label and shows a tooltip on hover. The `label` is used as the `aria-label` for accessibility."}}}},s={render:()=>a`
+  `,parameters:{docs:{description:{story:"Icon-only mode hides the label and shows a tooltip on hover. The `label` is used as the `aria-label` for accessibility."}}}},l={render:()=>a`
     <div class="flex flex-col gap-4">
       <div>
         <p class="mb-2 text-sm font-medium text-gray-500">Disabled</p>
@@ -60,30 +60,30 @@ ActionItem renders a styled button using existing \`btu-button-*\` classes. It s
         </div>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:"Disabled items remain focusable for accessibility (via `aria-disabled`) but suppress click events. Loading items show a spinner and also prevent interaction."}}}},l={render:()=>a`
+  `,parameters:{docs:{description:{story:"Disabled items remain focusable for accessibility (via `aria-disabled`) but suppress click events. Loading items show a spinner and also prevent interaction."}}}},c={render:()=>a`
     <div class="flex items-center gap-4">
       <btu-action-item
         variant="primary"
         label="Purple"
-        icon-name="palette"
-        style=${d({"--button-color":"oklch(0.55 0.2 290)","--button-text-color":"white","--button-border-radius":"999px"})}
+        symbol="palette"
+        style=${b({"--button-color":"oklch(0.55 0.2 290)","--button-text-color":"white","--button-border-radius":"999px"})}
       ></btu-action-item>
       <btu-action-item
         variant="secondary"
         label="Rounded"
-        icon-name="circle"
-        style=${d({"--button-border-radius":"999px"})}
+        symbol="circle"
+        style=${b({"--button-border-radius":"999px"})}
       ></btu-action-item>
       <btu-action-item
         variant="primary"
         label="Teal"
-        icon-name="droplets"
-        style=${d({"--button-color":"oklch(0.65 0.15 180)","--button-text-color":"white"})}
+        symbol="droplets"
+        style=${b({"--button-color":"oklch(0.65 0.15 180)","--button-text-color":"white"})}
       ></btu-action-item>
     </div>
-  `,parameters:{docs:{description:{story:"CSS custom properties (`--button-color`, `--button-text-color`, `--button-border-radius`) allow visual customization. Use the controls panel on the Default story to experiment interactively."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  `,parameters:{docs:{description:{story:"CSS custom properties (`--button-color`, `--button-text-color`, `--button-border-radius`) allow visual customization. Use the controls panel on the Default story to experiment interactively."}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
   args: {}
-}`,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex items-center gap-4">
       <btu-action-item variant="primary" label="Primary"></btu-action-item>
@@ -99,29 +99,29 @@ ActionItem renders a styled button using existing \`btu-button-*\` classes. It s
       }
     }
   }
-}`,...o.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex items-center gap-4">
-      <btu-action-item variant="primary" label="Publish" icon-name="send"></btu-action-item>
-      <btu-action-item variant="secondary" label="Save Draft" icon-name="file-text"></btu-action-item>
-      <btu-action-item variant="tertiary" label="Preview" icon-name="eye"></btu-action-item>
-      <btu-action-item variant="destructive" label="Delete" icon-name="trash-2"></btu-action-item>
+      <btu-action-item variant="primary" label="Publish" symbol="send"></btu-action-item>
+      <btu-action-item variant="secondary" label="Save Draft" symbol="file-text"></btu-action-item>
+      <btu-action-item variant="tertiary" label="Preview" symbol="eye"></btu-action-item>
+      <btu-action-item variant="destructive" label="Delete" symbol="trash-2"></btu-action-item>
     </div>
   \`,
   parameters: {
     docs: {
       description: {
-        story: 'Each variant with a leading Lucide icon. Set the \`icon-name\` attribute to any Lucide icon name.'
+        story: 'Each variant with a leading Lucide icon. Set the \`symbol\` attribute to any Lucide icon name.'
       }
     }
   }
-}`,...r.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+}`,...r.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex items-center gap-4">
-      <btu-action-item variant="primary" label="Save" icon-name="save" icon-only></btu-action-item>
-      <btu-action-item variant="secondary" label="Settings" icon-name="settings" icon-only></btu-action-item>
-      <btu-action-item variant="tertiary" label="Preview" icon-name="eye" icon-only></btu-action-item>
-      <btu-action-item variant="destructive" label="Delete" icon-name="trash-2" icon-only></btu-action-item>
+      <btu-action-item variant="primary" label="Save" symbol="save" icon-only></btu-action-item>
+      <btu-action-item variant="secondary" label="Settings" symbol="settings" icon-only></btu-action-item>
+      <btu-action-item variant="tertiary" label="Preview" symbol="eye" icon-only></btu-action-item>
+      <btu-action-item variant="destructive" label="Delete" symbol="trash-2" icon-only></btu-action-item>
     </div>
   \`,
   parameters: {
@@ -131,7 +131,7 @@ ActionItem renders a styled button using existing \`btu-button-*\` classes. It s
       }
     }
   }
-}`,...c.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 class="flex flex-col gap-4">
       <div>
@@ -161,13 +161,13 @@ ActionItem renders a styled button using existing \`btu-button-*\` classes. It s
       }
     }
   }
-}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+}`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex items-center gap-4">
       <btu-action-item
         variant="primary"
         label="Purple"
-        icon-name="palette"
+        symbol="palette"
         style=\${styleMap({
     '--button-color': 'oklch(0.55 0.2 290)',
     '--button-text-color': 'white',
@@ -177,7 +177,7 @@ ActionItem renders a styled button using existing \`btu-button-*\` classes. It s
       <btu-action-item
         variant="secondary"
         label="Rounded"
-        icon-name="circle"
+        symbol="circle"
         style=\${styleMap({
     '--button-border-radius': '999px'
   })}
@@ -185,7 +185,7 @@ ActionItem renders a styled button using existing \`btu-button-*\` classes. It s
       <btu-action-item
         variant="primary"
         label="Teal"
-        icon-name="droplets"
+        symbol="droplets"
         style=\${styleMap({
     '--button-color': 'oklch(0.65 0.15 180)',
     '--button-text-color': 'white'
@@ -200,4 +200,4 @@ ActionItem renders a styled button using existing \`btu-button-*\` classes. It s
       }
     }
   }
-}`,...l.parameters?.docs?.source}}};const h=["Default","Variants","WithIcons","IconOnly","States","CustomStyling"];export{l as CustomStyling,n as Default,c as IconOnly,s as States,o as Variants,r as WithIcons,h as __namedExportsOrder,g as default};
+}`,...c.parameters?.docs?.source}}};const h=["Default","Variants","WithIcons","IconOnly","States","CustomStyling"];export{c as CustomStyling,o as Default,s as IconOnly,l as States,n as Variants,r as WithIcons,h as __namedExportsOrder,g as default};