import{g as S,x as t}from"./iframe-CMPv_g6-.js";import{o as f}from"./style-map-968Ye5qo.js";import"./preload-helper-PPVm8Dsz.js";const{events:O,args:A,argTypes:n}=S("btu-dropdown"),B={title:"Components/Dropdown",component:"btu-dropdown",tags:["autodocs"],parameters:{docs:{subtitle:"btu-dropdown",description:{component:`
A dropdown menu component that renders a trigger button and manages a floating panel
containing a \`btu-dropdown-menu\` with \`btu-dropdown-item\` children.

Uses the native Popover API and CSS anchor positioning for panel management.
Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibility.

<h3>When to use:</h3>
<ul>
  <li>For action menus triggered by a button</li>
  <li>For selection lists with optional checkboxes</li>
  <li>For menus with favorites, shortcuts, and item grouping</li>
</ul>

<h3>Keyboard Navigation:</h3>
<ul>
  <li><strong>Enter / Space</strong> — Toggle menu open/closed</li>
  <li><strong>Arrow Down</strong> — Open menu, focus first item</li>
  <li><strong>Arrow Up</strong> — Open menu, focus last item</li>
  <li><strong>Escape / Tab</strong> — Close menu, return focus to trigger</li>
  <li><strong>Home / End</strong> — Jump to first/last item</li>
  <li><strong>Type characters</strong> — Typeahead search matching item labels</li>
</ul>
        `}},actions:{handles:O},controls:{expanded:!0}},args:{...A,label:"Actions",variant:"secondary",size:"md",placement:"bottom-start",disabled:!1,"icon-only":!1,"stay-open-on-select":!1,"no-chevron":!1,symbol:"settings","icon-position":"leading"},argTypes:{...n,label:{...n.label,control:{type:"text"},description:"Trigger button text"},variant:{...n.variant,control:{type:"select"},options:["primary","secondary","tertiary","primary-clear","secondary-clear","tertiary-clear"],description:"Button variant"},size:{...n.size,control:{type:"select"},options:["sm","md","lg"],description:"Button size"},placement:{...n.placement,control:{type:"select"},options:["bottom-start","bottom-end","top-start","top-end"],description:"Panel placement relative to trigger"},disabled:{...n.disabled,control:{type:"boolean"},description:"Prevents opening the dropdown"},"icon-only":{...n["icon-only"],control:{type:"boolean"},description:"Hides label, shows icon only"},"stay-open-on-select":{...n["stay-open-on-select"],control:{type:"boolean"},description:"Keeps panel open when an item is selected"},symbol:{...n.symbol,control:{type:"text"},description:"Lucide icon symbol for the trigger button"},"icon-position":{...n["icon-position"],control:{type:"select"},options:["leading","trailing"],description:"Icon position relative to label text (requires `symbol` to be set)"},"no-chevron":{...n["no-chevron"],control:{type:"boolean"},description:"Hides the chevron icon on the trigger button"},open:{table:{disable:!0}},"tooltip-delay":{table:{disable:!0}},"tooltip-offset":{table:{disable:!0}},"tooltip-no-arrow":{table:{disable:!0}},"tooltip-trigger":{table:{disable:!0}},"tooltip-position":{table:{disable:!0}},"--tooltip-color-background":{table:{disable:!0}},"--tooltip-color-text":{table:{disable:!0}},"--tooltip-border-radius":{table:{disable:!0}},"--dropdown-panel-background":{table:{disable:!0}},"--dropdown-panel-border-color":{table:{disable:!0}},"--dropdown-panel-border-radius":{table:{disable:!0}},"--dropdown-panel-min-width":{table:{disable:!0}},"--dropdown-item-background":{table:{disable:!0}},"--dropdown-item-color":{table:{disable:!0}},"--dropdown-item-hover-background":{table:{disable:!0}},"--dropdown-item-hover-color":{table:{disable:!0}},"--dropdown-item-selected-background":{table:{disable:!0}},"--dropdown-item-selected-color":{table:{disable:!0}},"--dropdown-item-font-size":{table:{disable:!0}},"--dropdown-divider-color":{table:{disable:!0}},"--dropdown-empty-color":{table:{disable:!0}},panelBackground:{name:"--dropdown-panel-background",control:{type:"color"},description:"Panel background color (default: white)",table:{category:"css properties"}},panelBorderColor:{name:"--dropdown-panel-border-color",control:{type:"color"},description:"Panel border color (default: gray-200)",table:{category:"css properties"}},panelBorderRadius:{name:"--dropdown-panel-border-radius",control:{type:"text"},description:"Panel border radius (default: borderRadius.lg)",table:{category:"css properties"}},panelMinWidth:{name:"--dropdown-panel-min-width",control:{type:"text"},description:"Panel minimum width (default: max(12rem, anchor-size(width)))",table:{category:"css properties"}},itemBackground:{name:"--dropdown-item-background",control:{type:"color"},description:"Item background color (default: transparent)",table:{category:"css properties"}},itemColor:{name:"--dropdown-item-color",control:{type:"color"},description:"Item text color (default: gray-700)",table:{category:"css properties"}},itemHoverBackground:{name:"--dropdown-item-hover-background",control:{type:"color"},description:"Item hover background (default: gray-100)",table:{category:"css properties"}},itemHoverColor:{name:"--dropdown-item-hover-color",control:{type:"color"},description:"Item hover text color (default: gray-900)",table:{category:"css properties"}},itemSelectedBackground:{name:"--dropdown-item-selected-background",control:{type:"color"},description:"Selected item background (default: primary-50)",table:{category:"css properties"}},itemSelectedColor:{name:"--dropdown-item-selected-color",control:{type:"color"},description:"Selected item text color (default: primary-700)",table:{category:"css properties"}},itemFontSize:{name:"--dropdown-item-font-size",control:{type:"text"},description:"Item font size (default: fontSize.sm)",table:{category:"css properties"}},dividerColor:{name:"--dropdown-divider-color",control:{type:"color"},description:"Divider line color (default: gray-200)",table:{category:"css properties"}},emptyColor:{name:"--dropdown-empty-color",control:{type:"color"},description:"Empty state text color (default: gray-400)",table:{category:"css properties"}}},render:o=>{const e={};return o.panelBackground&&(e["--dropdown-panel-background"]=o.panelBackground),o.panelBorderColor&&(e["--dropdown-panel-border-color"]=o.panelBorderColor),o.panelBorderRadius&&(e["--dropdown-panel-border-radius"]=o.panelBorderRadius),o.panelMinWidth&&(e["--dropdown-panel-min-width"]=o.panelMinWidth),o.itemBackground&&(e["--dropdown-item-background"]=o.itemBackground),o.itemColor&&(e["--dropdown-item-color"]=o.itemColor),o.itemHoverBackground&&(e["--dropdown-item-hover-background"]=o.itemHoverBackground),o.itemHoverColor&&(e["--dropdown-item-hover-color"]=o.itemHoverColor),o.itemSelectedBackground&&(e["--dropdown-item-selected-background"]=o.itemSelectedBackground),o.itemSelectedColor&&(e["--dropdown-item-selected-color"]=o.itemSelectedColor),o.itemFontSize&&(e["--dropdown-item-font-size"]=o.itemFontSize),o.dividerColor&&(e["--dropdown-divider-color"]=o.dividerColor),o.emptyColor&&(e["--dropdown-empty-color"]=o.emptyColor),t`
      <btu-dropdown
        style=${f(e)}
        label="${o.label}"
        variant="${o.variant}"
        size="${o.size}"
        placement="${o.placement}"
        ?disabled="${o.disabled}"
        ?icon-only="${o["icon-only"]}"
        ?stay-open-on-select="${o["stay-open-on-select"]}"
        ?no-chevron="${o["no-chevron"]}"
        symbol="${o.symbol||""}"
        icon-position="${o["icon-position"]||"leading"}"
      >
        <btu-dropdown-menu name="Actions">
          <btu-dropdown-item label="Edit"></btu-dropdown-item>
          <btu-dropdown-item label="Duplicate"></btu-dropdown-item>
          <btu-dropdown-item label="Archive"></btu-dropdown-item>
          <btu-dropdown-item type="divider"></btu-dropdown-item>
          <btu-dropdown-item label="Delete" disabled></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    `}},d={args:{}},r={render:()=>t`
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;">
      <btu-dropdown label="Primary" variant="primary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Secondary" variant="secondary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Tertiary" variant="tertiary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  `,parameters:{docs:{description:{story:"Button variants: **primary**, **secondary** (outlined), and **tertiary** (fill-none). Clear variants are also available via the controls."}}}},i={render:()=>t`
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;">
      <btu-dropdown label="Small" size="sm" variant="secondary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Medium" size="md" variant="secondary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Large" size="lg" variant="secondary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  `,parameters:{docs:{description:{story:"Three button sizes: **sm**, **md** (default), and **lg**."}}}},a={render:()=>t`
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;">
      <btu-dropdown label="Settings" variant="secondary" symbol="settings">
        <btu-dropdown-menu icon symbol="circle">
          <btu-dropdown-item label="Profile" symbol="user"></btu-dropdown-item>
          <btu-dropdown-item label="Preferences" symbol="sliders-horizontal"></btu-dropdown-item>
          <btu-dropdown-item label="Notifications" symbol="bell"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Trailing Icon" variant="secondary" symbol="filter" icon-position="trailing">
        <btu-dropdown-menu>
          <btu-dropdown-item label="All Items"></btu-dropdown-item>
          <btu-dropdown-item label="Active Only"></btu-dropdown-item>
          <btu-dropdown-item label="Archived"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="More actions" variant="tertiary" symbol="ellipsis" icon-only>
        <btu-dropdown-menu>
          <btu-dropdown-item label="Edit"></btu-dropdown-item>
          <btu-dropdown-item label="Duplicate"></btu-dropdown-item>
          <btu-dropdown-item label="Delete"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  `,parameters:{docs:{description:{story:"Trigger buttons with leading icons, trailing icons, and icon-only mode. Icon-only triggers get an `aria-label` from the `label` property for accessibility."}}}},l={render:()=>t`
    <div
      style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 6rem 2rem; max-width: 600px; margin: 0 auto;"
    >
      <btu-dropdown label="Bottom Start" variant="secondary" placement="bottom-start">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Bottom End" variant="secondary" placement="bottom-end">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Top Start" variant="secondary" placement="top-start">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Top End" variant="secondary" placement="top-end">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  `,parameters:{docs:{description:{story:"Four placement options using CSS anchor positioning with logical keywords for RTL support. Panels auto-flip when near viewport edges using `flip-block`."}}}},p={render:()=>t`
    <btu-dropdown label="Sort By" variant="secondary">
      <btu-dropdown-menu name="Sort By" header>
        <btu-dropdown-item label="Name" selected></btu-dropdown-item>
        <btu-dropdown-item label="Date Created"></btu-dropdown-item>
        <btu-dropdown-item label="Date Modified"></btu-dropdown-item>
        <btu-dropdown-item label="Size"></btu-dropdown-item>
      </btu-dropdown-menu>
    </btu-dropdown>
  `,parameters:{docs:{description:{story:"Items can be marked as `selected` to show a check mark. In non-checkbox mode, this is a visual indicator without toggle behavior."}}}},b={render:()=>t`
    <btu-dropdown label="Columns" variant="secondary">
      <btu-dropdown-menu name="Visible Columns" header checkbox>
        <btu-dropdown-item label="Name" selected></btu-dropdown-item>
        <btu-dropdown-item label="Status" selected></btu-dropdown-item>
        <btu-dropdown-item label="Priority"></btu-dropdown-item>
        <btu-dropdown-item label="Assignee" selected></btu-dropdown-item>
        <btu-dropdown-item label="Due Date"></btu-dropdown-item>
        <btu-dropdown-item label="Labels"></btu-dropdown-item>
      </btu-dropdown-menu>
    </btu-dropdown>
  `,parameters:{docs:{description:{story:'Checkbox mode toggles items on click/Space. The panel stays open automatically for checkbox menus. Each item uses `role="menuitemcheckbox"` with `aria-checked`.'}}}},s={render:()=>t`
    <btu-dropdown label="Commands" variant="secondary" symbol="terminal">
      <btu-dropdown-menu name="Commands" header favorites shortcuts>
        <btu-dropdown-item label="New File" shortcut="Ctrl+N" favorited></btu-dropdown-item>
        <btu-dropdown-item label="Open File" shortcut="Ctrl+O"></btu-dropdown-item>
        <btu-dropdown-item label="Save" shortcut="Ctrl+S"></btu-dropdown-item>
        <btu-dropdown-item type="divider"></btu-dropdown-item>
        <btu-dropdown-item label="Find" shortcut="Ctrl+F"></btu-dropdown-item>
        <btu-dropdown-item label="Replace" shortcut="Ctrl+H"></btu-dropdown-item>
      </btu-dropdown-menu>
    </btu-dropdown>
  `,parameters:{docs:{description:{story:"Menu items can display keyboard shortcuts and favorite toggle stars. Enable with the `favorites` and `shortcuts` attributes on `btu-dropdown-menu`."}}}},u={render:()=>t`
    <btu-dropdown label="Navigation" variant="secondary" symbol="layout-grid">
      <btu-dropdown-menu icon>
        <btu-dropdown-item type="subhead" label="Content"></btu-dropdown-item>
        <btu-dropdown-item label="Articles" symbol="file-text"></btu-dropdown-item>
        <btu-dropdown-item label="Media" symbol="image"></btu-dropdown-item>
        <btu-dropdown-item label="Pages" symbol="layout"></btu-dropdown-item>
        <btu-dropdown-item type="divider"></btu-dropdown-item>
        <btu-dropdown-item type="subhead" label="Settings"></btu-dropdown-item>
        <btu-dropdown-item label="General" symbol="settings"></btu-dropdown-item>
        <btu-dropdown-item label="Users" symbol="users"></btu-dropdown-item>
        <btu-dropdown-item label="Permissions" symbol="shield"></btu-dropdown-item>
      </btu-dropdown-menu>
    </btu-dropdown>
  `,parameters:{docs:{description:{story:'Use `type="divider"` for horizontal separators and `type="subhead"` for group labels. Subheads and dividers are not focusable during keyboard navigation.'}}}},m={render:()=>t`
    <div style="display: flex; gap: 1rem; align-items: flex-start;">
      <btu-dropdown label="Disabled Trigger" variant="secondary" disabled>
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Disabled Items" variant="secondary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Available Action"></btu-dropdown-item>
          <btu-dropdown-item label="Restricted Action" disabled></btu-dropdown-item>
          <btu-dropdown-item label="Another Action"></btu-dropdown-item>
          <btu-dropdown-item label="Admin Only" disabled></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  `,parameters:{docs:{description:{story:'A disabled trigger prevents opening. Disabled items within an open menu are focusable (per WAI-ARIA) but non-activatable, announced with `aria-disabled="true"`.'}}}},w={render:()=>t`
    <btu-dropdown label="Actions" variant="secondary">
      <btu-dropdown-menu>
        <btu-dropdown-item label="Publish"></btu-dropdown-item>
        <btu-dropdown-item label="SEO" error></btu-dropdown-item>
        <btu-dropdown-item label="Archive"></btu-dropdown-item>
        <btu-dropdown-item label="Overrides" error></btu-dropdown-item>
      </btu-dropdown-menu>
    </btu-dropdown>
  `,parameters:{docs:{description:{story:"Set `error` on a `btu-dropdown-item` to show an error badge alongside the label. Used by the `btu-tabs` `menu` variant to surface validation errors on tab items."}}}},c={render:()=>t`
    <btu-dropdown label="Filters" variant="secondary" symbol="filter" stay-open-on-select>
      <btu-dropdown-menu name="Apply Filters" header>
        <btu-dropdown-item label="Published" selected></btu-dropdown-item>
        <btu-dropdown-item label="Draft"></btu-dropdown-item>
        <btu-dropdown-item label="Archived"></btu-dropdown-item>
        <btu-dropdown-item label="Deleted"></btu-dropdown-item>
      </btu-dropdown-menu>
    </btu-dropdown>
  `,parameters:{docs:{description:{story:"When `stay-open-on-select` is set, the panel remains open after item activation. Useful for filter menus where users select multiple options."}}}},y={render:()=>t`
    <div style="display: flex; gap: 1rem; align-items: flex-start;">
      <btu-dropdown label="More actions" variant="tertiary" symbol="ellipsis" icon-only tooltip="More actions">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Edit"></btu-dropdown-item>
          <btu-dropdown-item label="Duplicate"></btu-dropdown-item>
          <btu-dropdown-item label="Delete"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown
        label="Settings"
        variant="secondary"
        symbol="settings"
        icon-only
        tooltip="Settings"
        tooltip-position="bottom"
      >
        <btu-dropdown-menu>
          <btu-dropdown-item label="Profile"></btu-dropdown-item>
          <btu-dropdown-item label="Preferences"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  `,parameters:{docs:{description:{story:"Icon-only dropdowns can display a tooltip on hover/focus via `TooltipMixin`. The tooltip hides automatically when the dropdown panel opens."}}}},g={render:()=>t`
    <div style="display: flex; gap: 1rem; align-items: flex-start;">
      <btu-dropdown label="Default Message" variant="secondary">
        <btu-dropdown-menu name="Results" header> </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Custom Message" variant="secondary">
        <btu-dropdown-menu name="Search Results" header empty-message="No results found"> </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  `,parameters:{docs:{description:{story:'When a menu has no focusable items, an empty state message is displayed. Customize with the `empty-message` attribute (default: "No items available").'}}}},h={render:()=>t`
    <div style="display: flex; gap: 1rem; align-items: center;">
      <button
        class="btu-button btu-button-primary btu-button-md"
        @click=${o=>{const e=o.target.parentElement?.querySelector("btu-dropdown");e&&(e.open=!e.open)}}
      >
        Toggle Dropdown
      </button>
      <btu-dropdown label="Programmatic" variant="secondary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  `,parameters:{docs:{description:{story:"The `open` property can be set programmatically to open/close the dropdown from external code (e.g., tour UIs, keyboard shortcuts). It syncs to the native Popover API."}}}},v={render:()=>t`
    <div style="display: flex; gap: 1rem; align-items: flex-start;">
      <btu-dropdown
        label="Rounded Trigger"
        variant="secondary"
        style=${f({"--button-border-radius":"9999px"})}
      >
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown
        label="Custom Panel"
        variant="secondary"
        style=${f({"--dropdown-panel-border-radius":"1rem","--dropdown-item-hover-background":"oklch(0.95 0.02 250)","--dropdown-item-hover-color":"oklch(0.3 0.1 250)"})}
      >
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  `,parameters:{docs:{description:{story:"The trigger button accepts `--button-*` CSS custom properties via inheritance. Panel and item styling uses `--dropdown-*` properties. Both can be set on `<btu-dropdown>` or a parent element."}}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
  args: {}
}`,...d.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;">
      <btu-dropdown label="Primary" variant="primary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Secondary" variant="secondary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Tertiary" variant="tertiary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Button variants: **primary**, **secondary** (outlined), and **tertiary** (fill-none). Clear variants are also available via the controls.'
      }
    }
  }
}`,...r.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;">
      <btu-dropdown label="Small" size="sm" variant="secondary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Medium" size="md" variant="secondary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Large" size="lg" variant="secondary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Three button sizes: **sm**, **md** (default), and **lg**.'
      }
    }
  }
}`,...i.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;">
      <btu-dropdown label="Settings" variant="secondary" symbol="settings">
        <btu-dropdown-menu icon symbol="circle">
          <btu-dropdown-item label="Profile" symbol="user"></btu-dropdown-item>
          <btu-dropdown-item label="Preferences" symbol="sliders-horizontal"></btu-dropdown-item>
          <btu-dropdown-item label="Notifications" symbol="bell"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Trailing Icon" variant="secondary" symbol="filter" icon-position="trailing">
        <btu-dropdown-menu>
          <btu-dropdown-item label="All Items"></btu-dropdown-item>
          <btu-dropdown-item label="Active Only"></btu-dropdown-item>
          <btu-dropdown-item label="Archived"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="More actions" variant="tertiary" symbol="ellipsis" icon-only>
        <btu-dropdown-menu>
          <btu-dropdown-item label="Edit"></btu-dropdown-item>
          <btu-dropdown-item label="Duplicate"></btu-dropdown-item>
          <btu-dropdown-item label="Delete"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Trigger buttons with leading icons, trailing icons, and icon-only mode. Icon-only triggers get an \`aria-label\` from the \`label\` property for accessibility.'
      }
    }
  }
}`,...a.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div
      style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 6rem 2rem; max-width: 600px; margin: 0 auto;"
    >
      <btu-dropdown label="Bottom Start" variant="secondary" placement="bottom-start">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Bottom End" variant="secondary" placement="bottom-end">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Top Start" variant="secondary" placement="top-start">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Top End" variant="secondary" placement="top-end">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Four placement options using CSS anchor positioning with logical keywords for RTL support. Panels auto-flip when near viewport edges using \`flip-block\`.'
      }
    }
  }
}`,...l.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <btu-dropdown label="Sort By" variant="secondary">
      <btu-dropdown-menu name="Sort By" header>
        <btu-dropdown-item label="Name" selected></btu-dropdown-item>
        <btu-dropdown-item label="Date Created"></btu-dropdown-item>
        <btu-dropdown-item label="Date Modified"></btu-dropdown-item>
        <btu-dropdown-item label="Size"></btu-dropdown-item>
      </btu-dropdown-menu>
    </btu-dropdown>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Items can be marked as \`selected\` to show a check mark. In non-checkbox mode, this is a visual indicator without toggle behavior.'
      }
    }
  }
}`,...p.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <btu-dropdown label="Columns" variant="secondary">
      <btu-dropdown-menu name="Visible Columns" header checkbox>
        <btu-dropdown-item label="Name" selected></btu-dropdown-item>
        <btu-dropdown-item label="Status" selected></btu-dropdown-item>
        <btu-dropdown-item label="Priority"></btu-dropdown-item>
        <btu-dropdown-item label="Assignee" selected></btu-dropdown-item>
        <btu-dropdown-item label="Due Date"></btu-dropdown-item>
        <btu-dropdown-item label="Labels"></btu-dropdown-item>
      </btu-dropdown-menu>
    </btu-dropdown>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Checkbox mode toggles items on click/Space. The panel stays open automatically for checkbox menus. Each item uses \`role="menuitemcheckbox"\` with \`aria-checked\`.'
      }
    }
  }
}`,...b.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <btu-dropdown label="Commands" variant="secondary" symbol="terminal">
      <btu-dropdown-menu name="Commands" header favorites shortcuts>
        <btu-dropdown-item label="New File" shortcut="Ctrl+N" favorited></btu-dropdown-item>
        <btu-dropdown-item label="Open File" shortcut="Ctrl+O"></btu-dropdown-item>
        <btu-dropdown-item label="Save" shortcut="Ctrl+S"></btu-dropdown-item>
        <btu-dropdown-item type="divider"></btu-dropdown-item>
        <btu-dropdown-item label="Find" shortcut="Ctrl+F"></btu-dropdown-item>
        <btu-dropdown-item label="Replace" shortcut="Ctrl+H"></btu-dropdown-item>
      </btu-dropdown-menu>
    </btu-dropdown>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Menu items can display keyboard shortcuts and favorite toggle stars. Enable with the \`favorites\` and \`shortcuts\` attributes on \`btu-dropdown-menu\`.'
      }
    }
  }
}`,...s.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <btu-dropdown label="Navigation" variant="secondary" symbol="layout-grid">
      <btu-dropdown-menu icon>
        <btu-dropdown-item type="subhead" label="Content"></btu-dropdown-item>
        <btu-dropdown-item label="Articles" symbol="file-text"></btu-dropdown-item>
        <btu-dropdown-item label="Media" symbol="image"></btu-dropdown-item>
        <btu-dropdown-item label="Pages" symbol="layout"></btu-dropdown-item>
        <btu-dropdown-item type="divider"></btu-dropdown-item>
        <btu-dropdown-item type="subhead" label="Settings"></btu-dropdown-item>
        <btu-dropdown-item label="General" symbol="settings"></btu-dropdown-item>
        <btu-dropdown-item label="Users" symbol="users"></btu-dropdown-item>
        <btu-dropdown-item label="Permissions" symbol="shield"></btu-dropdown-item>
      </btu-dropdown-menu>
    </btu-dropdown>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Use \`type="divider"\` for horizontal separators and \`type="subhead"\` for group labels. Subheads and dividers are not focusable during keyboard navigation.'
      }
    }
  }
}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; gap: 1rem; align-items: flex-start;">
      <btu-dropdown label="Disabled Trigger" variant="secondary" disabled>
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Disabled Items" variant="secondary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Available Action"></btu-dropdown-item>
          <btu-dropdown-item label="Restricted Action" disabled></btu-dropdown-item>
          <btu-dropdown-item label="Another Action"></btu-dropdown-item>
          <btu-dropdown-item label="Admin Only" disabled></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'A disabled trigger prevents opening. Disabled items within an open menu are focusable (per WAI-ARIA) but non-activatable, announced with \`aria-disabled="true"\`.'
      }
    }
  }
}`,...m.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <btu-dropdown label="Actions" variant="secondary">
      <btu-dropdown-menu>
        <btu-dropdown-item label="Publish"></btu-dropdown-item>
        <btu-dropdown-item label="SEO" error></btu-dropdown-item>
        <btu-dropdown-item label="Archive"></btu-dropdown-item>
        <btu-dropdown-item label="Overrides" error></btu-dropdown-item>
      </btu-dropdown-menu>
    </btu-dropdown>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Set \`error\` on a \`btu-dropdown-item\` to show an error badge alongside the label. Used by the \`btu-tabs\` \`menu\` variant to surface validation errors on tab items.'
      }
    }
  }
}`,...w.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <btu-dropdown label="Filters" variant="secondary" symbol="filter" stay-open-on-select>
      <btu-dropdown-menu name="Apply Filters" header>
        <btu-dropdown-item label="Published" selected></btu-dropdown-item>
        <btu-dropdown-item label="Draft"></btu-dropdown-item>
        <btu-dropdown-item label="Archived"></btu-dropdown-item>
        <btu-dropdown-item label="Deleted"></btu-dropdown-item>
      </btu-dropdown-menu>
    </btu-dropdown>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'When \`stay-open-on-select\` is set, the panel remains open after item activation. Useful for filter menus where users select multiple options.'
      }
    }
  }
}`,...c.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; gap: 1rem; align-items: flex-start;">
      <btu-dropdown label="More actions" variant="tertiary" symbol="ellipsis" icon-only tooltip="More actions">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Edit"></btu-dropdown-item>
          <btu-dropdown-item label="Duplicate"></btu-dropdown-item>
          <btu-dropdown-item label="Delete"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown
        label="Settings"
        variant="secondary"
        symbol="settings"
        icon-only
        tooltip="Settings"
        tooltip-position="bottom"
      >
        <btu-dropdown-menu>
          <btu-dropdown-item label="Profile"></btu-dropdown-item>
          <btu-dropdown-item label="Preferences"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Icon-only dropdowns can display a tooltip on hover/focus via \`TooltipMixin\`. The tooltip hides automatically when the dropdown panel opens.'
      }
    }
  }
}`,...y.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; gap: 1rem; align-items: flex-start;">
      <btu-dropdown label="Default Message" variant="secondary">
        <btu-dropdown-menu name="Results" header> </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown label="Custom Message" variant="secondary">
        <btu-dropdown-menu name="Search Results" header empty-message="No results found"> </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'When a menu has no focusable items, an empty state message is displayed. Customize with the \`empty-message\` attribute (default: "No items available").'
      }
    }
  }
}`,...g.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; gap: 1rem; align-items: center;">
      <button
        class="btu-button btu-button-primary btu-button-md"
        @click=\${(e: Event) => {
    const dropdown = (e.target as HTMLElement).parentElement?.querySelector('btu-dropdown');
    if (dropdown) dropdown.open = !dropdown.open;
  }}
      >
        Toggle Dropdown
      </button>
      <btu-dropdown label="Programmatic" variant="secondary">
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'The \`open\` property can be set programmatically to open/close the dropdown from external code (e.g., tour UIs, keyboard shortcuts). It syncs to the native Popover API.'
      }
    }
  }
}`,...h.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; gap: 1rem; align-items: flex-start;">
      <btu-dropdown
        label="Rounded Trigger"
        variant="secondary"
        style=\${styleMap({
    '--button-border-radius': '9999px'
  })}
      >
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>

      <btu-dropdown
        label="Custom Panel"
        variant="secondary"
        style=\${styleMap({
    '--dropdown-panel-border-radius': '1rem',
    '--dropdown-item-hover-background': 'oklch(0.95 0.02 250)',
    '--dropdown-item-hover-color': 'oklch(0.3 0.1 250)'
  })}
      >
        <btu-dropdown-menu>
          <btu-dropdown-item label="Option A"></btu-dropdown-item>
          <btu-dropdown-item label="Option B"></btu-dropdown-item>
          <btu-dropdown-item label="Option C"></btu-dropdown-item>
        </btu-dropdown-menu>
      </btu-dropdown>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'The trigger button accepts \`--button-*\` CSS custom properties via inheritance. Panel and item styling uses \`--dropdown-*\` properties. Both can be set on \`<btu-dropdown>\` or a parent element.'
      }
    }
  }
}`,...v.parameters?.docs?.source}}};const P=["Default","Variants","Sizes","WithIcons","Placements","Selection","Checkboxes","FavoritesAndShortcuts","DividersAndSubheads","Disabled","WithError","StayOpenOnSelect","Tooltip","EmptyState","ProgrammaticOpen","CustomStyling"];export{b as Checkboxes,v as CustomStyling,d as Default,m as Disabled,u as DividersAndSubheads,g as EmptyState,s as FavoritesAndShortcuts,l as Placements,h as ProgrammaticOpen,p as Selection,i as Sizes,c as StayOpenOnSelect,y as Tooltip,r as Variants,w as WithError,a as WithIcons,P as __namedExportsOrder,B as default};
