@brightspot/ui 1.9.0 → 1.11.0

package/dist/storybook/assets/ActionBar.stories--nAeDC-G.js

@@ -0,0 +1,408 @@
+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:`
+ActionBar provides a horizontal bar for grouping action buttons, typically anchored to the bottom of a view.
+
+<h3>Two-Zone Layout:</h3>
+<p>Uses a start zone (left) for destructive actions and an end zone (right) for main actions. Both zones maintain their position even when the other is empty.</p>
+
+<h3>Auto-Sort & Overflow:</h3>
+<p>Items are automatically sorted by variant priority (tertiary → secondary → primary). When items don't fit, the least important overflow into a "More" dropdown first. With the <code>compact</code> attribute and <code>compactable</code> on items, labels progressively compact to icon-only one-by-one before overflowing.</p>
+
+<h3>Positioning:</h3>
+<p>Uses <code>margin-top: auto</code> to push to the bottom of flex/grid parent containers. Add the <code>sticky</code> attribute for CSS sticky positioning (combines with <code>position</code> for top or bottom).</p>
+
+<h3>Keyboard Navigation (WAI-ARIA toolbar):</h3>
+<ul>
+  <li><strong>Arrow Left/Right</strong> — Move between items (wraps)</li>
+  <li><strong>Home / End</strong> — Jump to first/last item</li>
+  <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`
+      <btu-action-bar
+        label="${t.label}"
+        position="${t.position}"
+        ?sticky="${t.sticky}"
+        item-alignment="${t["item-alignment"]}"
+        ?shadow="${t.shadow}"
+        ?compact="${t.compact}"
+        style=${u(i)}
+      >
+        <btu-action-item
+          zone="start"
+          variant="destructive"
+          label="Permanently Delete"
+          icon-name="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`
+    <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-bar>
+      </div>
+      <div>
+        <p class="mb-2 text-sm font-medium text-gray-500">
+          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-bar>
+      </div>
+      <div>
+        <p class="mb-2 text-sm font-medium text-gray-500">
+          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-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`
+    <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="end" variant="primary" label="Save"></btu-action-item>
+        </btu-action-bar>
+      </div>
+      <div>
+        <p class="mb-2 text-sm font-medium text-gray-500">item-alignment="start" (auto-sorted: primary leftmost)</p>
+        <btu-action-bar label="Start alignment" item-alignment="start">
+          <btu-action-item variant="secondary" label="Cancel"></btu-action-item>
+          <btu-action-item variant="primary" label="Save"></btu-action-item>
+        </btu-action-bar>
+      </div>
+      <div>
+        <p class="mb-2 text-sm font-medium text-gray-500">item-alignment="center"</p>
+        <btu-action-bar label="Center alignment" item-alignment="center">
+          <btu-action-item variant="secondary" label="Cancel"></btu-action-item>
+          <btu-action-item variant="primary" label="Save"></btu-action-item>
+        </btu-action-bar>
+      </div>
+      <div>
+        <p class="mb-2 text-sm font-medium text-gray-500">item-alignment="end"</p>
+        <btu-action-bar label="End alignment" item-alignment="end">
+          <btu-action-item variant="secondary" label="Cancel"></btu-action-item>
+          <btu-action-item variant="primary" label="Save"></btu-action-item>
+        </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`
+    <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>
+        <btu-action-bar label="Bottom position">
+          <btu-action-item variant="primary" label="Save"></btu-action-item>
+        </btu-action-bar>
+      </div>
+      <div class="flex h-[300px] w-[300px] flex-col rounded-lg border border-gray-200">
+        <btu-action-bar label="Top position" position="top">
+          <btu-action-item variant="primary" label="Save"></btu-action-item>
+        </btu-action-bar>
+        <div class="flex-1 p-4 text-sm text-gray-500">position="top"</div>
+      </div>
+      <div class="h-[300px] w-[300px] overflow-auto rounded-lg border border-gray-200">
+        <div class="flex min-h-[500px] flex-col">
+          <div class="flex-1 p-4 text-sm text-gray-500">sticky + bottom — Scroll to see</div>
+          <btu-action-bar label="Sticky bottom" sticky>
+            <btu-action-item variant="primary" label="Save"></btu-action-item>
+          </btu-action-bar>
+        </div>
+      </div>
+      <div class="h-[300px] w-[300px] overflow-auto rounded-lg border border-gray-200">
+        <div class="flex min-h-[500px] flex-col">
+          <btu-action-bar label="Sticky top" position="top" sticky>
+            <btu-action-item variant="primary" label="Save"></btu-action-item>
+          </btu-action-bar>
+          <div class="flex-1 p-4 text-sm text-gray-500">sticky + top — Scroll to see</div>
+        </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`
+    <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`
+    <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-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`
+    <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-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`
+    <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-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`
+    <btu-action-bar
+      label="Custom styled"
+      shadow
+      style=${u({"--action-bar-gap":"2rem","--action-bar-padding":"1.5rem 3rem","--action-bar-background":"oklch(0.25 0.05 260)","--action-bar-border-color":"oklch(0.55 0.15 280)"})}
+    >
+      <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:`{
+  args: {}
+}`,...o.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">
+          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-bar>
+      </div>
+      <div>
+        <p class="mb-2 text-sm font-medium text-gray-500">
+          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-bar>
+      </div>
+      <div>
+        <p class="mb-2 text-sm font-medium text-gray-500">
+          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-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.'
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.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="end" variant="primary" label="Save"></btu-action-item>
+        </btu-action-bar>
+      </div>
+      <div>
+        <p class="mb-2 text-sm font-medium text-gray-500">item-alignment="start" (auto-sorted: primary leftmost)</p>
+        <btu-action-bar label="Start alignment" item-alignment="start">
+          <btu-action-item variant="secondary" label="Cancel"></btu-action-item>
+          <btu-action-item variant="primary" label="Save"></btu-action-item>
+        </btu-action-bar>
+      </div>
+      <div>
+        <p class="mb-2 text-sm font-medium text-gray-500">item-alignment="center"</p>
+        <btu-action-bar label="Center alignment" item-alignment="center">
+          <btu-action-item variant="secondary" label="Cancel"></btu-action-item>
+          <btu-action-item variant="primary" label="Save"></btu-action-item>
+        </btu-action-bar>
+      </div>
+      <div>
+        <p class="mb-2 text-sm font-medium text-gray-500">item-alignment="end"</p>
+        <btu-action-bar label="End alignment" item-alignment="end">
+          <btu-action-item variant="secondary" label="Cancel"></btu-action-item>
+          <btu-action-item variant="primary" label="Save"></btu-action-item>
+        </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.'
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.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">
+        <div class="flex-1 p-4 text-sm text-gray-500">position="bottom" (default)</div>
+        <btu-action-bar label="Bottom position">
+          <btu-action-item variant="primary" label="Save"></btu-action-item>
+        </btu-action-bar>
+      </div>
+      <div class="flex h-[300px] w-[300px] flex-col rounded-lg border border-gray-200">
+        <btu-action-bar label="Top position" position="top">
+          <btu-action-item variant="primary" label="Save"></btu-action-item>
+        </btu-action-bar>
+        <div class="flex-1 p-4 text-sm text-gray-500">position="top"</div>
+      </div>
+      <div class="h-[300px] w-[300px] overflow-auto rounded-lg border border-gray-200">
+        <div class="flex min-h-[500px] flex-col">
+          <div class="flex-1 p-4 text-sm text-gray-500">sticky + bottom — Scroll to see</div>
+          <btu-action-bar label="Sticky bottom" sticky>
+            <btu-action-item variant="primary" label="Save"></btu-action-item>
+          </btu-action-bar>
+        </div>
+      </div>
+      <div class="h-[300px] w-[300px] overflow-auto rounded-lg border border-gray-200">
+        <div class="flex min-h-[500px] flex-col">
+          <btu-action-bar label="Sticky top" position="top" sticky>
+            <btu-action-item variant="primary" label="Save"></btu-action-item>
+          </btu-action-bar>
+          <div class="flex-1 p-4 text-sm text-gray-500">sticky + top — Scroll to see</div>
+        </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.'
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.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>
+      <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.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.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-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".'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.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-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:
+1. Tertiary "Preview" compacts first
+2. Then secondary "Save Draft" compacts
+3. Then primary "Publish" compacts
+4. Finally items overflow into "More" dropdown\`
+      }
+    }
+  }
+}`,...m.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.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-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.'
+      }
+    }
+  }
+}`,...b.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-action-bar
+      label="Custom styled"
+      shadow
+      style=\${styleMap({
+    '--action-bar-gap': '2rem',
+    '--action-bar-padding': '1.5rem 3rem',
+    '--action-bar-background': 'oklch(0.25 0.05 260)',
+    '--action-bar-border-color': 'oklch(0.55 0.15 280)'
+  })}
+    >
+      <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.'
+      }
+    }
+  }
+}`,...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};

package/dist/storybook/assets/ActionItem.stories-BHrGjk-P.js

@@ -0,0 +1,203 @@
+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:`
+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>
+<p>ActionItem can be used standalone for documentation purposes. However, the <code>zone</code> and <code>compactable</code> attributes only take effect inside a <code>btu-action-bar</code> parent, which manages two-zone layout, overflow, and progressive compacting.</p>
+
+<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`
+      <btu-action-item
+        label="${t.label}"
+        variant="${t.variant}"
+        icon-name="${t["icon-name"]}"
+        ?icon-only="${t["icon-only"]}"
+        ?disabled="${t.disabled}"
+        ?loading="${t.loading}"
+        zone="${t.zone}"
+        ?compactable="${t.compactable}"
+        style=${d(i)}
+      ></btu-action-item>
+    `}},n={args:{}},o={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>
+      <btu-action-item variant="tertiary" label="Tertiary"></btu-action-item>
+      <btu-action-item variant="destructive" label="Destructive"></btu-action-item>
+    </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>
+    </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`
+    <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>
+    </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`
+    <div class="flex flex-col gap-4">
+      <div>
+        <p class="mb-2 text-sm font-medium text-gray-500">Disabled</p>
+        <div class="flex items-center gap-4">
+          <btu-action-item variant="primary" label="Primary" disabled></btu-action-item>
+          <btu-action-item variant="secondary" label="Secondary" disabled></btu-action-item>
+          <btu-action-item variant="tertiary" label="Tertiary" disabled></btu-action-item>
+          <btu-action-item variant="destructive" label="Destructive" disabled></btu-action-item>
+        </div>
+      </div>
+      <div>
+        <p class="mb-2 text-sm font-medium text-gray-500">Loading</p>
+        <div class="flex items-center gap-4">
+          <btu-action-item variant="primary" label="Saving..." loading></btu-action-item>
+          <btu-action-item variant="secondary" label="Loading..." loading></btu-action-item>
+          <btu-action-item variant="tertiary" label="Loading..." loading></btu-action-item>
+          <btu-action-item variant="destructive" label="Deleting..." loading></btu-action-item>
+        </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`
+    <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"})}
+      ></btu-action-item>
+      <btu-action-item
+        variant="secondary"
+        label="Rounded"
+        icon-name="circle"
+        style=${d({"--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"})}
+      ></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:`{
+  args: {}
+}`,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <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>
+      <btu-action-item variant="tertiary" label="Tertiary"></btu-action-item>
+      <btu-action-item variant="destructive" label="Destructive"></btu-action-item>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'All four visual variants side by side. Each maps to \`btu-button-*\` classes from the button Tailwind plugin.'
+      }
+    }
+  }
+}`,...o.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>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Each variant with a leading Lucide icon. Set the \`icon-name\` attribute to any Lucide icon name.'
+      }
+    }
+  }
+}`,...r.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="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>
+    </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.'
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.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">Disabled</p>
+        <div class="flex items-center gap-4">
+          <btu-action-item variant="primary" label="Primary" disabled></btu-action-item>
+          <btu-action-item variant="secondary" label="Secondary" disabled></btu-action-item>
+          <btu-action-item variant="tertiary" label="Tertiary" disabled></btu-action-item>
+          <btu-action-item variant="destructive" label="Destructive" disabled></btu-action-item>
+        </div>
+      </div>
+      <div>
+        <p class="mb-2 text-sm font-medium text-gray-500">Loading</p>
+        <div class="flex items-center gap-4">
+          <btu-action-item variant="primary" label="Saving..." loading></btu-action-item>
+          <btu-action-item variant="secondary" label="Loading..." loading></btu-action-item>
+          <btu-action-item variant="tertiary" label="Loading..." loading></btu-action-item>
+          <btu-action-item variant="destructive" label="Deleting..." loading></btu-action-item>
+        </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.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="flex items-center gap-4">
+      <btu-action-item
+        variant="primary"
+        label="Purple"
+        icon-name="palette"
+        style=\${styleMap({
+    '--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=\${styleMap({
+    '--button-border-radius': '999px'
+  })}
+      ></btu-action-item>
+      <btu-action-item
+        variant="primary"
+        label="Teal"
+        icon-name="droplets"
+        style=\${styleMap({
+    '--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.'
+      }
+    }
+  }
+}`,...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};