import{g as p,x as e}from"./iframe-CMPv_g6-.js";import{o as u}from"./style-map-968Ye5qo.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>
<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: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}"
        ?sticky="${t.sticky}"
        item-alignment="${t["item-alignment"]}"
        ?shadow="${t.shadow}"
        ?compact="${t.compact}"
        style=${u(o)}
      >
        <btu-action-item
          zone="start"
          variant="destructive"
          label="Permanently Delete"
          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>
    `}},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" 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>
        <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" 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>
        <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" 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."}}}},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" symbol="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.'}}}},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>
        <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."}}}},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."}}}},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" 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".`}}}},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" 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'}}}},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" 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`
    <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."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  args: {}
}`,...i.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">
          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" 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>
        <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" 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>
        <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" 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.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" symbol="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.'
      }
    }
  }
}`,...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">
        <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.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>
      <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.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" 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".'
      }
    }
  }
}`,...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" 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:
1. Tertiary "Preview" compacts first
2. Then secondary "Save Draft" compacts
3. Then primary "Publish" compacts
4. Finally items overflow into "More" dropdown\`
      }
    }
  }
}`,...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" 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.'
      }
    }
  }
}`,...m.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{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};
