@mcp-b/web-components 0.2.0

package/dist/dropdown-BXSKpVX9.js

@@ -0,0 +1,1123 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./dropdown-item-i77cRuN6.js";
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { animateWithClass } from "@mcp-b/wc-support/utilities/animate";
+import { SigveloBeforeCloseEvent, SigveloBeforeOpenEvent, SigveloCloseEvent, SigveloOpenEvent } from "@mcp-b/wc-support/events/open-close";
+import { lockScrolling, unlockScrolling } from "@mcp-b/wc-support/utilities/scroll";
+import { LongPress, LongPressEvent } from "@mcp-b/wc-support/utilities/long-press";
+import { autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
+import { createId } from "@mcp-b/wc-support/utilities/math";
+import { SigveloSelectEvent } from "@mcp-b/wc-support/events/select";
+import { activeElements } from "@mcp-b/wc-support/utilities/active-element";
+//#region src/components/dropdown/dropdown.styles.ts
+var dropdown_styles_default = css`
+  :host {
+    --show-duration: var(--sigvelo-motion-duration-interaction);
+
+    display: contents;
+  }
+
+  #menu {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    flex-direction: column;
+    width: max-content;
+    margin: 0;
+    padding: 0.25em;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-muted);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-surface);
+    box-shadow: var(--sigvelo-elevation-floating);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+    text-align: start;
+    user-select: none;
+
+    &.show {
+      animation: show var(--show-duration) ease;
+    }
+
+    &.hide {
+      animation: show var(--show-duration) ease reverse;
+    }
+
+    ::slotted(h1),
+    ::slotted(h2),
+    ::slotted(h3),
+    ::slotted(h4),
+    ::slotted(h5),
+    ::slotted(h6) {
+      display: block !important;
+      margin: 0.25em 0 !important;
+      padding: 0.25em 1em !important;
+      color: var(--sigvelo-color-text-muted) !important;
+      font-weight: var(--sigvelo-font-weight-semibold) !important;
+      font-size: 0.75em !important;
+    }
+
+    ::slotted(sigvelo-divider) {
+      --spacing: 0.25em;
+    }
+  }
+
+  :host([data-placement^="top"]) #menu {
+    transform-origin: bottom;
+  }
+
+  :host([data-placement^="bottom"]) #menu {
+    transform-origin: top;
+  }
+
+  :host([data-placement^="left"]) #menu {
+    transform-origin: right;
+  }
+
+  :host([data-placement^="right"]) #menu {
+    transform-origin: left;
+  }
+
+  :host([data-placement="left-start"]) #menu {
+    transform-origin: right top;
+  }
+
+  :host([data-placement="left-end"]) #menu {
+    transform-origin: right bottom;
+  }
+
+  :host([data-placement="right-start"]) #menu {
+    transform-origin: left top;
+  }
+
+  :host([data-placement="right-end"]) #menu {
+    transform-origin: left bottom;
+  }
+
+  @keyframes show {
+    from {
+      scale: 0.9;
+      opacity: 0;
+    }
+    to {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+`;
+//#endregion
+//#region src/components/dropdown/dropdown.ts
+const openDropdowns = /* @__PURE__ */ new Set();
+/**
+* <sigvelo-dropdown>
+*
+* @summary Provides a menu of options that appear when the corresponding trigger is activated.
+* @tag sigvelo-dropdown
+* @documentation https://design-system.sigvelo.com/docs/components/dropdown
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-dropdown-item
+*
+* @slot - One or more `<dropdown-item>` elements to show in the dropdown. You can also use `<sigvelo-divider>` here.
+* @slot trigger - The dropdown's trigger. Must be a `<sigvelo-button>` or `<button>` element.
+*
+* @event sigvelo-before-open - Emitted when the dropdown is instructed to open but before it is shown.
+* @event sigvelo-open - Emitted when the dropdown menu has opened and the animation has completed.
+* @event sigvelo-before-close - Emitted when the dropdown is dismissed but before it is hidden.
+* @event sigvelo-close - Emitted when the dropdown menu has closed and the animation has completed.
+* @event sigvelo-select - Emitted when a dropdown item has been selected. You can inspect `event.detail.item` to see the
+*  `<sigvelo-dropdown-item>` that was selected. Calling `event.preventDefault()` will keep the dropdown open.
+*
+* @cssproperty [--show-duration=50ms] - The duration of the show/hide animation.
+*
+* @csspart menu - The dropdown menu's container.
+*
+* @cssstate open - Applied when the dropdown is open.
+*
+* @example Default
+* Dropdown menus appear when their trigger element is clicked. They are not modal, so no overlay is shown when open. Dropdowns will close when the user selects an item, clicks outside of them, or presses [[Escape]]. Only one dropdown can be open at a time.
+*
+* ```html
+* <sigvelo-dropdown>
+*   <sigvelo-button slot="trigger" with-caret>
+*     <sigvelo-icon slot="start" name="mail"></sigvelo-icon>
+*     Message
+*   </sigvelo-button>
+*
+*   <h3>Actions</h3>
+*
+*   <sigvelo-dropdown-item value="reply">
+*     <sigvelo-icon slot="icon" name="corner-up-left"></sigvelo-icon>
+*     Reply
+*     <sigvelo-hotkey slot="details" keys="$cmdctrl R" variant="unstyled"></sigvelo-hotkey>
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item value="forward">
+*     <sigvelo-icon slot="icon" name="corner-up-right"></sigvelo-icon>
+*     Forward
+*     <sigvelo-hotkey slot="details" keys="$cmdctrl F" variant="unstyled"></sigvelo-hotkey>
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item value="archive">
+*     <sigvelo-icon slot="icon" name="archive"></sigvelo-icon>
+*     Archive
+*     <sigvelo-hotkey slot="details" keys="$shift $cmdctrl A" variant="unstyled"></sigvelo-hotkey>
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item value="delete" color="destructive">
+*     <sigvelo-icon slot="icon" name="trash"></sigvelo-icon>
+*     Delete
+*     <span slot="details">Del</span>
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-divider></sigvelo-divider>
+*
+*   <sigvelo-dropdown-item value="images" type="checkbox" checked>
+*     Show images
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item value="wrap" type="checkbox" checked>
+*     Word wrap
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-divider></sigvelo-divider>
+*
+*    <sigvelo-dropdown-item>
+*     <sigvelo-icon slot="icon" name="tag"></sigvelo-icon>
+*     Labels
+*     <sigvelo-dropdown-item slot="submenu" value="add-label">
+*       <sigvelo-icon slot="icon" name="plus"></sigvelo-icon>
+*       Add label
+*     </sigvelo-dropdown-item>
+*     <sigvelo-dropdown-item slot="submenu" value="manage-labels">
+*       <sigvelo-icon slot="icon" name="edit"></sigvelo-icon>
+*       Manage labels
+*     </sigvelo-dropdown-item>
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item value="preferences">
+*     <sigvelo-icon slot="icon" name="adjustments-horizontal"></sigvelo-icon>
+*     Preferences
+*   </sigvelo-dropdown-item>
+* </sigvelo-dropdown>
+* ```
+*
+* @example Getting the selected item
+* When an item is selected, the `sigvelo-select` event will be emitted by the dropdown. You can inspect `event.detail.item` to get a reference to the selected item. If you've provided a value for each dropdown item, it will be available in `event.detail.item.value`.
+*
+* ```html
+* <sigvelo-dropdown id="dropdown__selected">
+*   <sigvelo-button slot="trigger" with-caret>View</sigvelo-button>
+*   <sigvelo-dropdown-item value="full-screen">Enter full screen</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="actual">Actual size</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="zoom-in">Zoom in</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="zoom-out">Zoom out</sigvelo-dropdown-item>
+* </sigvelo-dropdown>
+*
+* <script>
+*   const dropdown = document.getElementById('dropdown__selected');
+*
+*   dropdown.addEventListener('sigvelo-select', event => {
+*     console.log(event.detail.item.value);
+*   });
+* <\/script>
+* ```
+*
+* **Note:** To keep the dropdown open after selection, call `event.preventDefault()` in the `sigvelo-select` event's callback.
+*
+* @example Showing icons
+* Use the `icon` slot to add icons to dropdown items. This works best with icon elements.
+*
+* ```html
+* <sigvelo-dropdown>
+*   <sigvelo-button slot="trigger" with-caret>Edit</sigvelo-button>
+*
+*   <sigvelo-dropdown-item value="cut">
+*     <sigvelo-icon slot="icon" name="scissors"></sigvelo-icon>
+*       Cut
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item value="copy">
+*     <sigvelo-icon slot="icon" name="clipboard-copy"></sigvelo-icon>
+*       Copy
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item value="paste">
+*     <sigvelo-icon slot="icon" name="clipboard-plus"></sigvelo-icon>
+*       Paste
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item value="delete">
+*     <sigvelo-icon slot="icon" name="backspace"></sigvelo-icon>
+*       Delete
+*   </sigvelo-dropdown-item>
+* </sigvelo-dropdown>
+* ```
+*
+* @example Showing labels & dividers
+* Use any heading, e.g. `<h1>`–`<h6>` to add labels and the `<sigvelo-divider>` element for separators.
+*
+* ```html
+* <sigvelo-dropdown>
+*   <sigvelo-button slot="trigger" with-caret>Device</sigvelo-button>
+*   <h3>Type</h3>
+*   <sigvelo-dropdown-item value="phone">Phone</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="tablet">Tablet</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="desktop">Desktop</sigvelo-dropdown-item>
+*   <sigvelo-divider></sigvelo-divider>
+*   <sigvelo-dropdown-item value="more">More options…</sigvelo-dropdown-item>
+* </sigvelo-dropdown>
+* ```
+*
+* @example Showing details
+* Use the `details` slot to display details, such as keyboard shortcuts, inside dropdown items.
+*
+* ```html
+* <sigvelo-dropdown>
+*   <sigvelo-button slot="trigger" with-caret>Message</sigvelo-button>
+*
+*   <sigvelo-dropdown-item value="reply">
+*     Reply
+*     <sigvelo-hotkey slot="details" keys="$cmdctrl R" variant="unstyled"></sigvelo-hotkey>
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item value="forward">
+*     Forward
+*     <sigvelo-hotkey slot="details" keys="$cmdctrl F" variant="unstyled"></sigvelo-hotkey>
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item value="move">
+*     Move
+*     <sigvelo-hotkey slot="details" keys="$cmdctrl M" variant="unstyled"></sigvelo-hotkey>
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-divider></sigvelo-divider>
+*
+*   <sigvelo-dropdown-item value="archive">
+*     Archive
+*     <sigvelo-hotkey slot="details" keys="$cmdctrl A" variant="unstyled"></sigvelo-hotkey>
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item value="delete" color="destructive">
+*     Delete
+*     <span slot="details">Delete</span>
+*   </sigvelo-dropdown-item>
+* </sigvelo-dropdown>
+* ```
+*
+* @example Checkable items
+* You can turn a dropdown item into a checkable option by setting `type="checkbox"`. Add the `checked` attribute to make it checked initially. When clicked, the item's checked state will toggle and the dropdown will close. You can cancel the `sigvelo-select` event if you want to keep it open instead.
+*
+* ```html
+* <sigvelo-dropdown id="dropdown__checkboxes">
+*   <sigvelo-button slot="trigger" with-caret>View</sigvelo-button>
+*   <sigvelo-dropdown-item type="checkbox" value="canvas" checked>Show canvas</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item type="checkbox" value="grid" checked>Show grid</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item type="checkbox" value="source">Show source</sigvelo-dropdown-item>
+*   <sigvelo-divider></sigvelo-divider>
+*   <sigvelo-dropdown-item value="preferences">Preferences…</sigvelo-dropdown-item>
+* </sigvelo-dropdown>
+*
+* <script>
+*   const dropdown = document.getElementById('dropdown__checkboxes');
+*
+*   dropdown.addEventListener('sigvelo-select', event => {
+*     if (event.detail.item.type === 'checkbox') {
+*       // Checkbox
+*       console.log(
+*         event.detail.item.value,
+*         event.detail.item.checked ? 'checked' : 'unchecked'
+*       );
+*     } else {
+*       // Not a checkbox
+*       console.log(event.detail.item.value);
+*     }
+*   });
+* <\/script>
+* ```
+*
+* **Note:** When a checkable option exists anywhere in the dropdown, all of items will receive additional padding so they align properly.
+*
+* @example Destructive items
+* Add `color="destructive"` to any dropdown item to highlight that it's a dangerous action.
+*
+* ```html
+* <sigvelo-dropdown>
+*   <sigvelo-button slot="trigger" with-caret>Project</sigvelo-button>
+*
+*   <sigvelo-dropdown-item value="share">
+*     <sigvelo-icon slot="icon" name="share-2"></sigvelo-icon>
+*     Share
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item value="preferences">
+*     <sigvelo-icon slot="icon" name="adjustments-horizontal"></sigvelo-icon>
+*     Preferences
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-divider></sigvelo-divider>
+*
+*   <h3>Danger zone</h3>
+*
+*   <sigvelo-dropdown-item value="archive">
+*     <sigvelo-icon slot="icon" name="archive"></sigvelo-icon>
+*     Archive
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item value="delete" color="destructive">
+*     <sigvelo-icon slot="icon" name="trash"></sigvelo-icon>
+*     Delete
+*   </sigvelo-dropdown-item>
+* </sigvelo-dropdown>
+* ```
+*
+* @example Link items
+* Add `href` to any dropdown item to make it behave like a link. When selected, the browser will navigate to the target URL. When creating link items, you can also use the `target`, `rel`, and `download` attributes to control how the link opens.
+*
+* ```html
+* <sigvelo-dropdown>
+*   <sigvelo-button slot="trigger" with-caret>Components</sigvelo-button>
+*   <sigvelo-dropdown-item href="/docs/components/button">Button</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item href="/docs/components/checkbox">Checkbox</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item href="/docs/components/radio">Radio</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item href="/docs/components/switch">Switch</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item href="/docs/components/text-field">Text Field</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item href="/docs/components/text-area">Text Area</sigvelo-dropdown-item>
+*   <sigvelo-divider></sigvelo-divider>
+*   <sigvelo-dropdown-item href="https://example.com/" target="_blank">
+*     Visit external website
+*     <sigvelo-icon name="external-link" slot="icon"></sigvelo-icon>
+*   </sigvelo-dropdown-item>
+* </sigvelo-dropdown>
+* ```
+*
+* **Note:** Note that link items are not actual links! You won't see a URL when hovering and users of assistive devices will need to infer it's behavior from context.  When a link item is selected, the component renders a hidden link and dispatches a synthetic event to open it. Modifier keys are passed from the original event, but only Chrome and Firefox appear to honor them. Safari opens the link, but ignores modifier keys.
+*
+* @example Submenus
+* To create submenus, nest additional dropdown items in a dropdown item and assign `slot="submenu"` to them. You can also add dividers as needed.
+*
+* ```html
+* <sigvelo-dropdown id="dropdown__submenus">
+*   <sigvelo-button slot="trigger" with-caret>Cat Type</sigvelo-button>
+*
+*   <sigvelo-dropdown-item>
+*     Domestic
+*     <sigvelo-dropdown-item slot="submenu" value="shorthair">Shorthair</sigvelo-dropdown-item>
+*     <sigvelo-dropdown-item slot="submenu" value="longhair">Longhair</sigvelo-dropdown-item>
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-dropdown-item>
+*     Pedigree
+*     <sigvelo-dropdown-item slot="submenu">
+*       European
+*       <sigvelo-dropdown-item slot="submenu" value="british">British Shorthair</sigvelo-dropdown-item>
+*       <sigvelo-dropdown-item slot="submenu" value="scottish">Scottish Fold</sigvelo-dropdown-item>
+*       <sigvelo-dropdown-item slot="submenu" value="chartreux">Chartreux</sigvelo-dropdown-item>
+*     </sigvelo-dropdown-item>
+*
+*     <sigvelo-dropdown-item slot="submenu">
+*       Asian
+*       <sigvelo-dropdown-item slot="submenu" value="siamese">Siamese</sigvelo-dropdown-item>
+*       <sigvelo-dropdown-item slot="submenu" value="bengal">Bengal</sigvelo-dropdown-item>
+*       <sigvelo-dropdown-item slot="submenu" value="burmese">Burmese</sigvelo-dropdown-item>
+*     </sigvelo-dropdown-item>
+*
+*     <sigvelo-dropdown-item slot="submenu" value="american">American Breeds</sigvelo-dropdown-item>
+*   </sigvelo-dropdown-item>
+*
+*   <sigvelo-divider></sigvelo-divider>
+*
+*   <sigvelo-dropdown-item>
+*     Sizes
+*     <sigvelo-dropdown-item slot="submenu" type="checkbox" value="small">Small</sigvelo-dropdown-item>
+*     <sigvelo-dropdown-item slot="submenu" type="checkbox" checked value="medium">Medium</sigvelo-dropdown-item>
+*     <sigvelo-dropdown-item slot="submenu" type="checkbox" value="large">Large</sigvelo-dropdown-item>
+*   </sigvelo-dropdown-item>
+* </sigvelo-dropdown>
+*
+* <script>
+*   const dropdown = document.getElementById('dropdown__submenus');
+*
+*   dropdown.addEventListener('sigvelo-select', event => {
+*     console.log(event.detail.item.value);
+*   });
+* <\/script>
+* ```
+*
+* **Note:** Dropdown items that contain a submenu will not dispatch the `sigvelo-select` event when clicked. However, items inside of the submenu will, unless they also have a submenu.
+*
+* @example Disabling items
+* Add the `disabled` attribute to any dropdown item to disabled it.
+*
+* ```html
+* <sigvelo-dropdown>
+*   <sigvelo-button slot="trigger" with-caret>Payment method</sigvelo-button>
+*   <sigvelo-dropdown-item value="cash">Cash</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="check" disabled>Personal check</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="credit">Credit card</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="gift-card">Gift card</sigvelo-dropdown-item>
+* </sigvelo-dropdown>
+* ```
+*
+* @example Changing the placement
+* You can set the preferred placement of the dropdown menu with the `placement` attribute. The menu will shift to a more optimal location if the preferred placement doesn't have enough room.
+*
+* ```html
+* <sigvelo-dropdown placement="right">
+*   <sigvelo-button slot="trigger">
+*     Types of cats
+*     <sigvelo-icon slot="end" name="chevron-right"></sigvelo-icon>
+*   </sigvelo-button>
+*   <sigvelo-dropdown-item value="bengal">Bengal</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="calico">Calico</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="maine-coon">Maine coon</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="siamese">Siamese</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="tabby">Tabby</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="tuxedo">Tuxedo</sigvelo-dropdown-item>
+* </sigvelo-dropdown>
+* ```
+*
+* @example Context menus
+* To turn a dropdown menu into a context menu, omit the trigger and set the `context-menu` attribute to the ID of an element in the same document. When you right-click or long press (touch only) the target element, the context menu will be shown.
+*
+* ```html
+* <div id="dropdown__context" tabindex="0">
+*   Right-click or long press here to show the context menu
+* </div>
+*
+* <sigvelo-dropdown context-menu="dropdown__context">
+*   <sigvelo-dropdown-item value="cut">Cut</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="cut">Copy</sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item value="cut">Paste</sigvelo-dropdown-item>
+*   <sigvelo-divider></sigvelo-divider>
+*   <sigvelo-dropdown-item>
+*     Adjust
+*     <sigvelo-dropdown-item slot="submenu" value="brightness">Brightness</sigvelo-dropdown-item>
+*     <sigvelo-dropdown-item slot="submenu" value="contrast">Contrast</sigvelo-dropdown-item>
+*   </sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item>
+*     Filters
+*     <sigvelo-dropdown-item slot="submenu">
+*       Artistic
+*       <sigvelo-dropdown-item slot="submenu" value="watercolor">Watercolor</sigvelo-dropdown-item>
+*       <sigvelo-dropdown-item slot="submenu" value="oil-paint">Oil Paint</sigvelo-dropdown-item>
+*       <sigvelo-dropdown-item slot="submenu" value="sketch">Sketch</sigvelo-dropdown-item>
+*     </sigvelo-dropdown-item>
+*     <sigvelo-dropdown-item slot="submenu">
+*       Color
+*       <sigvelo-dropdown-item slot="submenu" value="grayscale">Grayscale</sigvelo-dropdown-item>
+*       <sigvelo-dropdown-item slot="submenu" value="sepia">Sepia</sigvelo-dropdown-item>
+*       <sigvelo-dropdown-item slot="submenu" value="vibrance">Vibrance</sigvelo-dropdown-item>
+*     </sigvelo-dropdown-item>
+*     <sigvelo-dropdown-item slot="submenu" value="blur">Blur Effects</sigvelo-dropdown-item>
+*   </sigvelo-dropdown-item>
+*   <sigvelo-dropdown-item>
+*     Transform
+*     <sigvelo-dropdown-item slot="submenu" value="crop">Crop</sigvelo-dropdown-item>
+*     <sigvelo-dropdown-item slot="submenu" value="rotate">Rotate</sigvelo-dropdown-item>
+*     <sigvelo-dropdown-item slot="submenu" value="resize">Resize</sigvelo-dropdown-item>
+*   </sigvelo-dropdown-item>
+* </sigvelo-dropdown>
+*
+* <style>
+*   #dropdown__context {
+*     display: flex;
+*     align-items: center;
+*     justify-content: center;
+*     text-align: center;
+*     min-height: 200px;
+*     color: var(--sigvelo-color-text-muted);
+*     background-color: var(--sigvelo-color-surface);
+*     border: dashed var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-muted);
+*     border-radius: var(--sigvelo-radius-md);
+*     padding: 1rem;
+*
+*     &:focus {
+*       outline: none;
+*     }
+*
+*     &:focus-visible {
+*       outline: var(--sigvelo-focus-ring);
+*       outline-offset: calc(var(--sigvelo-border-width) * -1);
+*     }
+*   }
+* </style>
+* ```
+*
+* **Warning:** The context menu element must be in the DOM when the dropdown is connected, otherwise the dropdown won't be attached and a warning will be shown in the console.
+*/
+var SigveloDropdown = class SigveloDropdown extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.submenuCleanups = /* @__PURE__ */ new Map();
+		this.localize = new Localize(this);
+		this.userTypedQuery = "";
+		this.openSubmenuStack = [];
+		this.open = false;
+		this.contextMenu = "";
+		this.placement = "bottom-start";
+		this.distance = 0;
+		this.offset = 0;
+		this.handleDocumentFocusIn = (event) => {
+			const path = event.composedPath();
+			if (!path.includes(this) && this.contextMenuElement && !path.includes(this.contextMenuElement)) this.open = false;
+		};
+		this.handleDocumentKeyDown = (event) => {
+			const isRtl = this.localize.dir() === "rtl";
+			if (event.key === "Escape") {
+				const trigger = this.getTrigger();
+				event.preventDefault();
+				event.stopPropagation();
+				this.open = false;
+				trigger?.focus();
+				return;
+			}
+			const activeElement = [...activeElements()].find((el) => el.localName === "sigvelo-dropdown-item");
+			const isFocusedOnItem = activeElement?.localName === "sigvelo-dropdown-item";
+			const currentSubmenuItem = this.getCurrentSubmenuItem();
+			const isInSubmenu = !!currentSubmenuItem;
+			let items;
+			let activeItem;
+			let activeItemIndex;
+			if (isInSubmenu) {
+				items = this.getSubmenuItems(currentSubmenuItem);
+				activeItem = items.find((item) => item.active || item === activeElement);
+				activeItemIndex = activeItem ? items.indexOf(activeItem) : -1;
+			} else {
+				items = this.getItems();
+				activeItem = items.find((item) => item.active || item === activeElement);
+				activeItemIndex = activeItem ? items.indexOf(activeItem) : -1;
+			}
+			let itemToSelect;
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				event.stopPropagation();
+				if (activeItemIndex > 0) itemToSelect = items[activeItemIndex - 1];
+				else itemToSelect = items[items.length - 1];
+			}
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				event.stopPropagation();
+				if (activeItemIndex !== -1 && activeItemIndex < items.length - 1) itemToSelect = items[activeItemIndex + 1];
+				else itemToSelect = items[0];
+			}
+			if (event.key === (isRtl ? "ArrowLeft" : "ArrowRight") && isFocusedOnItem && activeItem) {
+				if (activeItem.slotsWithContent && activeItem.slotsWithContent.has("submenu")) {
+					event.preventDefault();
+					event.stopPropagation();
+					activeItem.submenuOpen = true;
+					this.addToSubmenuStack(activeItem);
+					setTimeout(() => {
+						const submenuItems = this.getSubmenuItems(activeItem);
+						if (submenuItems.length > 0) {
+							submenuItems.forEach((item, index) => item.active = index === 0);
+							submenuItems[0].focus();
+						}
+					}, 0);
+					return;
+				}
+			}
+			if (event.key === (isRtl ? "ArrowRight" : "ArrowLeft") && isInSubmenu) {
+				event.preventDefault();
+				event.stopPropagation();
+				const removedItem = this.removeFromSubmenuStack();
+				if (removedItem) {
+					removedItem.submenuOpen = false;
+					setTimeout(() => {
+						removedItem.focus();
+						removedItem.active = true;
+						(removedItem.slot === "submenu" ? this.getSubmenuItems(removedItem.parentElement) : this.getItems()).forEach((item) => {
+							if (item !== removedItem) item.active = false;
+						});
+					}, 0);
+				}
+				return;
+			}
+			if (event.key === "Home" || event.key === "End") {
+				event.preventDefault();
+				event.stopPropagation();
+				itemToSelect = event.key === "Home" ? items[0] : items[items.length - 1];
+			}
+			if (event.key === "Tab") this.hideMenu();
+			if (event.key.length === 1 && !(event.metaKey || event.ctrlKey || event.altKey) && !(event.key === " " && this.userTypedQuery === "")) {
+				clearTimeout(this.userTypedTimeout);
+				this.userTypedTimeout = setTimeout(() => {
+					this.userTypedQuery = "";
+				}, 1e3);
+				this.userTypedQuery += event.key;
+				items.some((item) => {
+					const label = (item.textContent || "").trim().toLowerCase();
+					const selectionQuery = this.userTypedQuery.trim().toLowerCase();
+					if (label.startsWith(selectionQuery)) {
+						itemToSelect = item;
+						return true;
+					}
+					return false;
+				});
+			}
+			if (itemToSelect) {
+				event.preventDefault();
+				event.stopPropagation();
+				items.forEach((item) => item.active = item === itemToSelect);
+				itemToSelect.focus();
+				return;
+			}
+			if ((event.key === "Enter" || event.key === " " && this.userTypedQuery === "") && isFocusedOnItem && activeItem) {
+				event.preventDefault();
+				event.stopPropagation();
+				if (activeItem.slotsWithContent && activeItem.slotsWithContent.has("submenu")) {
+					activeItem.submenuOpen = true;
+					this.addToSubmenuStack(activeItem);
+					setTimeout(() => {
+						const submenuItems = this.getSubmenuItems(activeItem);
+						if (submenuItems.length > 0) {
+							submenuItems.forEach((item, index) => item.active = index === 0);
+							submenuItems[0].focus();
+						}
+					}, 0);
+				} else this.makeSelection(activeItem, event);
+			}
+		};
+		this.handleDocumentPointerDown = (event) => {
+			if (!event.composedPath().some((el) => {
+				if (el instanceof HTMLElement) return el === this || el.closest("sigvelo-dropdown, [part=\"submenu\"]");
+				return false;
+			})) this.open = false;
+		};
+		this.handleContextMenu = (event) => {
+			const originalEvent = event instanceof LongPressEvent ? event.detail.originalEvent : event;
+			const clientX = originalEvent instanceof MouseEvent || originalEvent instanceof PointerEvent ? originalEvent.clientX : originalEvent.touches[0].clientX;
+			const clientY = originalEvent instanceof MouseEvent || originalEvent instanceof PointerEvent ? originalEvent.clientY : originalEvent.touches[0].clientY;
+			event.preventDefault();
+			if (this.menu.hidden) {
+				this.contextMenuVirtualElement = this.getContextMenuVirtualElement(clientX, clientY);
+				this.open = true;
+			}
+		};
+		this.handleGlobalMouseMove = (event) => {
+			const currentSubmenuItem = this.getCurrentSubmenuItem();
+			if (!currentSubmenuItem?.submenuOpen || !currentSubmenuItem.submenuElement) return;
+			const submenuRect = currentSubmenuItem.submenuElement.getBoundingClientRect();
+			const isLeftPlacement = (currentSubmenuItem.submenuElement.getAttribute("data-placement") || "").startsWith("left");
+			const constrainedY = Math.max(submenuRect.top, Math.min(event.clientY, submenuRect.bottom));
+			let submenuEdgeX;
+			let constrainedX;
+			if (isLeftPlacement) {
+				submenuEdgeX = submenuRect.right;
+				constrainedX = Math.max(event.clientX, submenuEdgeX);
+			} else {
+				submenuEdgeX = submenuRect.left;
+				constrainedX = Math.min(event.clientX, submenuEdgeX);
+			}
+			currentSubmenuItem.submenuElement.style.setProperty("--safe-triangle-cursor-x", `${constrainedX}px`);
+			currentSubmenuItem.submenuElement.style.setProperty("--safe-triangle-cursor-y", `${constrainedY}px`);
+			const isOverItem = currentSubmenuItem.matches(":hover");
+			const isOverSubmenu = currentSubmenuItem.submenuElement?.matches(":hover") || !!event.composedPath().find((el) => el instanceof HTMLElement && el.closest("[part=\"submenu\"]") === currentSubmenuItem.submenuElement);
+			if (!isOverItem && !isOverSubmenu) setTimeout(() => {
+				if (!currentSubmenuItem.matches(":hover") && !currentSubmenuItem.submenuElement?.matches(":hover")) currentSubmenuItem.submenuOpen = false;
+			}, 100);
+		};
+	}
+	static {
+		this.styles = [hostStyles, dropdown_styles_default];
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		clearInterval(this.userTypedTimeout);
+		this.closeAllSubmenus();
+		this.submenuCleanups.forEach((cleanup) => cleanup());
+		this.submenuCleanups.clear();
+		document.removeEventListener("mousemove", this.handleGlobalMouseMove);
+	}
+	firstUpdated() {
+		this.syncAriaAttributes();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("open")) {
+			this.customStates.set("open", this.open);
+			if (this.open) this.showMenu();
+			else {
+				this.closeAllSubmenus();
+				this.hideMenu();
+			}
+		}
+		if (changedProperties.has("contextMenu")) {
+			const root = this.getRootNode();
+			if (this.contextMenuElement) {
+				this.contextMenuLongPress?.stop();
+				this.contextMenuElement.removeEventListener("contextmenu", this.handleContextMenu);
+				this.contextMenuElement.removeEventListener("sigvelo-long-press", this.handleContextMenu);
+			}
+			this.contextMenuElement = this.contextMenu ? root.getElementById(this.contextMenu) : null;
+			if (this.contextMenuElement) {
+				this.contextMenuLongPress = new LongPress(this.contextMenuElement, {
+					eventName: "sigvelo-long-press",
+					ignorePointerEvents: true
+				});
+				this.contextMenuLongPress.start();
+				this.contextMenuElement.addEventListener("contextmenu", this.handleContextMenu);
+				this.contextMenuElement.addEventListener("sigvelo-long-press", this.handleContextMenu);
+			} else if (this.contextMenu) console.warn(`A dropdown was assigned as a context menu to an element with an ID of "${this.contextMenu}" but the element could not be found.`, this);
+		}
+	}
+	/** Gets all <sigvelo-dropdown-item> elements slotted in the menu that aren't disabled. */
+	getItems(includeDisabled = false) {
+		const items = this.defaultSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "sigvelo-dropdown-item");
+		return includeDisabled ? items : items.filter((item) => !item.disabled);
+	}
+	/** Gets all dropdown items in a specific submenu. */
+	getSubmenuItems(parentItem, includeDisabled = false) {
+		const submenuSlot = parentItem.shadowRoot?.querySelector("slot[name=\"submenu\"]") || parentItem.querySelector("slot[name=\"submenu\"]");
+		if (!submenuSlot) return [];
+		const items = submenuSlot.assignedElements({ flatten: true }).filter((el) => el.localName === "sigvelo-dropdown-item");
+		return includeDisabled ? items : items.filter((item) => !item.disabled);
+	}
+	/** Handles the submenu navigation stack */
+	addToSubmenuStack(item) {
+		const index = this.openSubmenuStack.indexOf(item);
+		if (index !== -1) this.openSubmenuStack = this.openSubmenuStack.slice(0, index + 1);
+		else this.openSubmenuStack.push(item);
+	}
+	/** Removes the last item from the submenu stack */
+	removeFromSubmenuStack() {
+		return this.openSubmenuStack.pop();
+	}
+	/** Gets the current active submenu item */
+	getCurrentSubmenuItem() {
+		return this.openSubmenuStack.length > 0 ? this.openSubmenuStack[this.openSubmenuStack.length - 1] : void 0;
+	}
+	/** Closes all submenus in the dropdown. */
+	closeAllSubmenus() {
+		this.getItems(true).forEach((item) => {
+			item.submenuOpen = false;
+		});
+		this.openSubmenuStack = [];
+	}
+	/** Closes sibling submenus at the same level as the specified item. */
+	closeSiblingSubmenus(item) {
+		const parentDropdownItem = item.closest("sigvelo-dropdown-item:not([slot=\"submenu\"])");
+		let siblingItems;
+		if (parentDropdownItem) siblingItems = this.getSubmenuItems(parentDropdownItem, true);
+		else siblingItems = this.getItems(true);
+		siblingItems.forEach((siblingItem) => {
+			if (siblingItem !== item && siblingItem.submenuOpen) siblingItem.submenuOpen = false;
+		});
+		if (!this.openSubmenuStack.includes(item)) this.openSubmenuStack.push(item);
+	}
+	/** Get the slotted trigger button, a <sigvelo-button> or <button> element */
+	getTrigger() {
+		return this.querySelector("[slot=\"trigger\"]");
+	}
+	/** Shows the dropdown menu. This should only be called from within updated(). */
+	async showMenu() {
+		const anchor = this.contextMenu ? this.contextMenuVirtualElement : this.getTrigger();
+		if (!anchor) return;
+		const openEvent = new SigveloBeforeOpenEvent();
+		this.dispatchEvent(openEvent);
+		if (openEvent.defaultPrevented) {
+			this.open = false;
+			return;
+		}
+		openDropdowns.forEach((dropdown) => dropdown.open = false);
+		this.menu.showPopover();
+		this.open = true;
+		if (this.contextMenu) lockScrolling(this);
+		openDropdowns.add(this);
+		this.syncAriaAttributes();
+		document.addEventListener("keydown", this.handleDocumentKeyDown);
+		document.addEventListener("pointerdown", this.handleDocumentPointerDown);
+		document.addEventListener("focusin", this.handleDocumentFocusIn);
+		document.addEventListener("mousemove", this.handleGlobalMouseMove);
+		this.menu.hidden = false;
+		this.cleanup = autoUpdate(anchor, this.menu, () => this.reposition());
+		await animateWithClass(this.menu, "show");
+		const items = this.getItems();
+		if (items.length > 0) {
+			items.forEach((item, index) => item.active = index === 0);
+			items[0].focus();
+		}
+		this.dispatchEvent(new SigveloOpenEvent());
+	}
+	/** Hides the dropdown menu. This should only be called from within updated(). */
+	async hideMenu() {
+		const closeEvent = new SigveloBeforeCloseEvent({ source: this });
+		this.dispatchEvent(closeEvent);
+		if (closeEvent.defaultPrevented) {
+			this.open = true;
+			return;
+		}
+		this.open = false;
+		unlockScrolling(this);
+		openDropdowns.delete(this);
+		this.syncAriaAttributes();
+		document.removeEventListener("keydown", this.handleDocumentKeyDown);
+		document.removeEventListener("pointerdown", this.handleDocumentPointerDown);
+		document.removeEventListener("focusin", this.handleDocumentFocusIn);
+		document.removeEventListener("mousemove", this.handleGlobalMouseMove);
+		if (!this.menu.hidden) {
+			await animateWithClass(this.menu, "hide");
+			this.menu.hidden = true;
+			this.menu.hidePopover();
+			this.dispatchEvent(new SigveloCloseEvent());
+		}
+		if (this.cleanup) {
+			this.cleanup();
+			this.cleanup = void 0;
+			this.removeAttribute("data-placement");
+		}
+	}
+	/** Repositions the dropdown menu */
+	reposition() {
+		const anchor = this.contextMenu ? this.contextMenuVirtualElement : this.getTrigger();
+		if (!anchor) return;
+		computePosition(anchor, this.menu, {
+			placement: this.placement,
+			middleware: [
+				offset({
+					mainAxis: this.distance,
+					crossAxis: this.offset
+				}),
+				flip(),
+				shift(),
+				size({
+					apply: ({ availableWidth, availableHeight }) => {
+						Object.assign(this.menu.style, {
+							maxWidth: `${Math.max(0, availableWidth)}px`,
+							maxHeight: `${Math.max(0, availableHeight)}px`
+						});
+					},
+					padding: 10
+				})
+			]
+		}).then(({ x, y, placement }) => {
+			this.setAttribute("data-placement", placement);
+			Object.assign(this.menu.style, {
+				left: `${x}px`,
+				top: `${y}px`
+			});
+		});
+	}
+	/** Handles clicks on the menu. */
+	handleMenuClick(event) {
+		const item = event.target.closest("sigvelo-dropdown-item");
+		if (!item || item.disabled) return;
+		if (item.slotsWithContent && item.slotsWithContent.has("submenu")) {
+			if (!item.submenuOpen) {
+				this.closeSiblingSubmenus(item);
+				this.addToSubmenuStack(item);
+				item.submenuOpen = true;
+			}
+			event.stopPropagation();
+			return;
+		}
+		this.makeSelection(item, event);
+	}
+	/** Prepares dropdown items when they get added or removed */
+	async handleMenuSlotChange() {
+		const items = this.getItems(true);
+		await Promise.all(items.map((item) => item.updateComplete));
+		const hasCheckbox = items.some((item) => item.type === "checkbox");
+		const hasSubmenu = items.some((item) => item.hasSubmenu);
+		items.forEach((item, index) => {
+			item.active = index === 0;
+			item.checkboxAdjacent = hasCheckbox;
+			item.submenuAdjacent = hasSubmenu;
+		});
+	}
+	/** Toggles the dropdown menu */
+	handleTriggerClick() {
+		this.open = !this.open;
+	}
+	/** Given an x and y coordinate, a virtual element for Floating UI is returned.  */
+	getContextMenuVirtualElement(clientX, clientY) {
+		return { getBoundingClientRect: () => {
+			return {
+				x: clientX,
+				y: clientY,
+				top: clientY,
+				left: clientX,
+				bottom: clientY,
+				right: clientX,
+				width: 0,
+				height: 0
+			};
+		} };
+	}
+	/** Handles submenu opening events */
+	handleSubmenuOpening(event) {
+		const openingItem = event.detail.item;
+		this.closeSiblingSubmenus(openingItem);
+		this.addToSubmenuStack(openingItem);
+		this.setupSubmenuPosition(openingItem);
+		this.processSubmenuItems(openingItem);
+	}
+	/** Sets up submenu positioning with autoUpdate */
+	setupSubmenuPosition(item) {
+		if (!item.submenuElement) return;
+		this.cleanupSubmenuPosition(item);
+		const cleanup = autoUpdate(item, item.submenuElement, () => {
+			this.positionSubmenu(item);
+			this.updateSafeTriangleCoordinates(item);
+		});
+		this.submenuCleanups.set(item, cleanup);
+		const submenuSlot = item.submenuElement.querySelector("slot[name=\"submenu\"]");
+		if (submenuSlot) {
+			submenuSlot.removeEventListener("slotchange", SigveloDropdown.handleSubmenuSlotChange);
+			submenuSlot.addEventListener("slotchange", SigveloDropdown.handleSubmenuSlotChange);
+			SigveloDropdown.handleSubmenuSlotChange({ target: submenuSlot });
+		}
+	}
+	static handleSubmenuSlotChange(event) {
+		const slot = event.target;
+		if (!slot) return;
+		const items = slot.assignedElements().filter((el) => el.localName === "sigvelo-dropdown-item");
+		if (items.length === 0) return;
+		const hasSubmenuItems = items.some((item) => item.slotsWithContent && item.slotsWithContent.has("submenu"));
+		const hasCheckboxItems = items.some((item) => item.type === "checkbox");
+		items.forEach((item) => {
+			item.submenuAdjacent = hasSubmenuItems;
+			item.checkboxAdjacent = hasCheckboxItems;
+		});
+	}
+	processSubmenuItems(item) {
+		if (!item.submenuElement) return;
+		const submenuItems = this.getSubmenuItems(item, true);
+		const hasSubmenuItems = submenuItems.some((subItem) => subItem.slotsWithContent && subItem.slotsWithContent.has("submenu"));
+		submenuItems.forEach((subItem) => {
+			subItem.submenuAdjacent = hasSubmenuItems;
+		});
+	}
+	/** Cleans up submenu positioning */
+	cleanupSubmenuPosition(item) {
+		const cleanup = this.submenuCleanups.get(item);
+		if (cleanup) {
+			cleanup();
+			this.submenuCleanups.delete(item);
+		}
+	}
+	/** Positions a submenu relative to its parent item */
+	positionSubmenu(item) {
+		if (!item.submenuElement) return;
+		const placement = this.localize.dir() === "rtl" ? "left-start" : "right-start";
+		computePosition(item, item.submenuElement, {
+			placement,
+			middleware: [
+				offset({
+					mainAxis: 0,
+					crossAxis: -5
+				}),
+				flip({ fallbackStrategy: "bestFit" }),
+				shift({ padding: 8 })
+			]
+		}).then(({ x, y, placement: resolvedPlacement }) => {
+			item.submenuElement.setAttribute("data-placement", resolvedPlacement);
+			Object.assign(item.submenuElement.style, {
+				left: `${x}px`,
+				top: `${y}px`
+			});
+		});
+	}
+	/** Updates the safe triangle coordinates for a submenu */
+	updateSafeTriangleCoordinates(item) {
+		if (!item.submenuElement || !item.submenuOpen) return;
+		if (document.activeElement?.matches(":focus-visible")) {
+			item.submenuElement.style.setProperty("--safe-triangle-visible", "none");
+			return;
+		}
+		item.submenuElement.style.setProperty("--safe-triangle-visible", "block");
+		const submenuRect = item.submenuElement.getBoundingClientRect();
+		const placement = item.submenuElement.getAttribute("data-placement") || "";
+		const isRtl = this.localize.dir() === "rtl";
+		const isLeftPlacement = placement.startsWith("left");
+		const isRightPlacement = placement.startsWith("right");
+		let submenuEdgeX;
+		if (isLeftPlacement) submenuEdgeX = submenuRect.right;
+		else if (isRightPlacement) submenuEdgeX = submenuRect.left;
+		else submenuEdgeX = isRtl ? submenuRect.right : submenuRect.left;
+		item.submenuElement.style.setProperty("--safe-triangle-submenu-start-x", `${submenuEdgeX}px`);
+		item.submenuElement.style.setProperty("--safe-triangle-submenu-start-y", `${submenuRect.top}px`);
+		item.submenuElement.style.setProperty("--safe-triangle-submenu-end-x", `${submenuEdgeX}px`);
+		item.submenuElement.style.setProperty("--safe-triangle-submenu-end-y", `${submenuRect.bottom}px`);
+	}
+	/** Makes a selection, emits the sigvelo-select event, and closes the dropdown. */
+	makeSelection(item, originalEvent) {
+		const trigger = this.getTrigger();
+		if (item.disabled) return;
+		if (item.type === "checkbox") item.checked = !item.checked;
+		const selectEvent = new SigveloSelectEvent({ item });
+		this.dispatchEvent(selectEvent);
+		if (!selectEvent.defaultPrevented) {
+			this.open = false;
+			trigger?.focus();
+		}
+		if (item.hiddenLink) {
+			const clickEvent = new MouseEvent("click", {
+				bubbles: true,
+				cancelable: true,
+				view: window,
+				detail: originalEvent.detail,
+				ctrlKey: originalEvent.ctrlKey,
+				shiftKey: originalEvent.shiftKey,
+				altKey: originalEvent.altKey,
+				metaKey: originalEvent.metaKey
+			});
+			item.hiddenLink.dispatchEvent(clickEvent);
+		}
+	}
+	/** Syncs aria attributes on the slotted trigger element and the menu based on the dropdown's current state */
+	async syncAriaAttributes() {
+		const trigger = this.getTrigger();
+		let nativeButton;
+		if (!trigger) return;
+		if (trigger.localName === "sigvelo-button") {
+			await customElements.whenDefined("sigvelo-button");
+			await trigger.updateComplete;
+			nativeButton = trigger.shadowRoot.querySelector("[part=\"button\"]");
+		} else nativeButton = trigger;
+		if (!nativeButton.hasAttribute("id")) nativeButton.setAttribute("id", createId("sigvelo-dropdown-trigger-"));
+		nativeButton.setAttribute("aria-haspopup", "menu");
+		nativeButton.setAttribute("aria-expanded", this.open ? "true" : "false");
+		this.menu.setAttribute("aria-expanded", "false");
+	}
+	render() {
+		return html`
+      <slot
+        name="trigger"
+        @click=${this.handleTriggerClick}
+        @slotchange=${this.syncAriaAttributes}
+      ></slot>
+
+      <div
+        id="menu"
+        part="menu"
+        popover="manual"
+        role="menu"
+        tabindex="-1"
+        aria-orientation="vertical"
+        hidden
+        @click=${this.handleMenuClick}
+        @submenu-opening=${this.handleSubmenuOpening}
+      >
+        <slot @slotchange=${this.handleMenuSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+__decorate([query("slot:not([name])")], SigveloDropdown.prototype, "defaultSlot", void 0);
+__decorate([query("#menu")], SigveloDropdown.prototype, "menu", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloDropdown.prototype, "open", void 0);
+__decorate([property({ attribute: "context-menu" })], SigveloDropdown.prototype, "contextMenu", void 0);
+__decorate([property({ reflect: true })], SigveloDropdown.prototype, "placement", void 0);
+__decorate([property({ type: Number })], SigveloDropdown.prototype, "distance", void 0);
+__decorate([property({ type: Number })], SigveloDropdown.prototype, "offset", void 0);
+customElements.define("sigvelo-dropdown", SigveloDropdown);
+//#endregion
+export { SigveloDropdown as t };