@brightspot/ui 1.6.0 → 1.7.0

package/dist/storybook/assets/Dropdown.stories-CDcl6rmG.js

@@ -0,0 +1,697 @@
+import{g as f,x as t}from"./iframe-CM6gBkqA.js";import{o as v}from"./style-map-BJGdSb_D.js";import"./preload-helper-PPVm8Dsz.js";const{events:S,args:C,argTypes:n}=f("btu-dropdown"),k={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:S},controls:{expanded:!0}},args:{...C,label:"Actions",variant:"secondary",size:"medium",placement:"bottom-start",disabled:!1,"icon-only":!1,"stay-open-on-select":!1,"no-chevron":!1,"icon-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:["small","medium","large"],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"},"icon-symbol":{...n["icon-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 `icon-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=${v(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"]}"
+        icon-symbol="${o["icon-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="small" 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="medium" 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="large" 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: **small**, **medium** (default), and **large**."}}}},a={render:()=>t`
+    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;">
+      <btu-dropdown label="Settings" variant="secondary" icon-symbol="settings">
+        <btu-dropdown-menu icon icon-symbol="circle">
+          <btu-dropdown-item label="Profile" icon-symbol="user"></btu-dropdown-item>
+          <btu-dropdown-item label="Preferences" icon-symbol="sliders-horizontal"></btu-dropdown-item>
+          <btu-dropdown-item label="Notifications" icon-symbol="bell"></btu-dropdown-item>
+        </btu-dropdown-menu>
+      </btu-dropdown>
+
+      <btu-dropdown label="Trailing Icon" variant="secondary" icon-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" icon-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`.'}}}},u={render:()=>t`
+    <btu-dropdown label="Commands" variant="secondary" icon-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={render:()=>t`
+    <btu-dropdown label="Navigation" variant="secondary" icon-symbol="layout-grid">
+      <btu-dropdown-menu icon>
+        <btu-dropdown-item type="subhead" label="Content"></btu-dropdown-item>
+        <btu-dropdown-item label="Articles" icon-symbol="file-text"></btu-dropdown-item>
+        <btu-dropdown-item label="Media" icon-symbol="image"></btu-dropdown-item>
+        <btu-dropdown-item label="Pages" icon-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" icon-symbol="settings"></btu-dropdown-item>
+        <btu-dropdown-item label="Users" icon-symbol="users"></btu-dropdown-item>
+        <btu-dropdown-item label="Permissions" icon-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"`.'}}}},c={render:()=>t`
+    <btu-dropdown label="Filters" variant="secondary" icon-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."}}}},w={render:()=>t`
+    <div style="display: flex; gap: 1rem; align-items: flex-start;">
+      <btu-dropdown label="More actions" variant="tertiary" icon-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"
+        icon-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={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").'}}}},g={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."}}}},h={render:()=>t`
+    <div style="display: flex; gap: 1rem; align-items: flex-start;">
+      <btu-dropdown
+        label="Rounded Trigger"
+        variant="secondary"
+        style=${v({"--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=${v({"--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="small" 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="medium" 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="large" 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: **small**, **medium** (default), and **large**.'
+      }
+    }
+  }
+}`,...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" icon-symbol="settings">
+        <btu-dropdown-menu icon icon-symbol="circle">
+          <btu-dropdown-item label="Profile" icon-symbol="user"></btu-dropdown-item>
+          <btu-dropdown-item label="Preferences" icon-symbol="sliders-horizontal"></btu-dropdown-item>
+          <btu-dropdown-item label="Notifications" icon-symbol="bell"></btu-dropdown-item>
+        </btu-dropdown-menu>
+      </btu-dropdown>
+
+      <btu-dropdown label="Trailing Icon" variant="secondary" icon-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" icon-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}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-dropdown label="Commands" variant="secondary" icon-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.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-dropdown label="Navigation" variant="secondary" icon-symbol="layout-grid">
+      <btu-dropdown-menu icon>
+        <btu-dropdown-item type="subhead" label="Content"></btu-dropdown-item>
+        <btu-dropdown-item label="Articles" icon-symbol="file-text"></btu-dropdown-item>
+        <btu-dropdown-item label="Media" icon-symbol="image"></btu-dropdown-item>
+        <btu-dropdown-item label="Pages" icon-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" icon-symbol="settings"></btu-dropdown-item>
+        <btu-dropdown-item label="Users" icon-symbol="users"></btu-dropdown-item>
+        <btu-dropdown-item label="Permissions" icon-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.'
+      }
+    }
+  }
+}`,...s.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}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-dropdown label="Filters" variant="secondary" icon-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}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: flex; gap: 1rem; align-items: flex-start;">
+      <btu-dropdown label="More actions" variant="tertiary" icon-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"
+        icon-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.'
+      }
+    }
+  }
+}`,...w.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="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").'
+      }
+    }
+  }
+}`,...y.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.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.'
+      }
+    }
+  }
+}`,...g.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.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.'
+      }
+    }
+  }
+}`,...h.parameters?.docs?.source}}};const B=["Default","Variants","Sizes","WithIcons","Placements","Selection","Checkboxes","FavoritesAndShortcuts","DividersAndSubheads","Disabled","StayOpenOnSelect","Tooltip","EmptyState","ProgrammaticOpen","CustomStyling"];export{b as Checkboxes,h as CustomStyling,d as Default,m as Disabled,s as DividersAndSubheads,y as EmptyState,u as FavoritesAndShortcuts,l as Placements,g as ProgrammaticOpen,p as Selection,i as Sizes,c as StayOpenOnSelect,w as Tooltip,r as Variants,a as WithIcons,B as __namedExportsOrder,k as default};