@mcp-b/web-components 0.2.0

package/dist/dropdown-Bo00Vlr5.d.ts

@@ -0,0 +1,537 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/dropdown/dropdown.d.ts
+/**
+ * <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.
+ */
+declare class SigveloDropdown extends SigveloElement {
+  static styles: CSSResultGroup;
+  private cleanup;
+  private submenuCleanups;
+  private contextMenuElement;
+  private contextMenuLongPress;
+  private contextMenuVirtualElement;
+  private localize;
+  private userTypedQuery;
+  private userTypedTimeout;
+  private openSubmenuStack;
+  defaultSlot: HTMLSlotElement;
+  private menu;
+  /** Opens or closes the dropdown. */
+  open: boolean;
+  /** The ID of an element to apply the dropdown as a context menu. */
+  contextMenu: string;
+  /**
+   * The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if
+   * the preferred placement doesn't have enough room.
+   */
+  placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
+  /** The distance of the dropdown menu from its trigger. */
+  distance: number;
+  /** The offset of the dropdown menu along its trigger. */
+  offset: number;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues): void;
+  /** Gets all <sigvelo-dropdown-item> elements slotted in the menu that aren't disabled. */
+  private getItems;
+  /** Gets all dropdown items in a specific submenu. */
+  private getSubmenuItems;
+  /** Handles the submenu navigation stack */
+  private addToSubmenuStack;
+  /** Removes the last item from the submenu stack */
+  private removeFromSubmenuStack;
+  /** Gets the current active submenu item */
+  private getCurrentSubmenuItem;
+  /** Closes all submenus in the dropdown. */
+  private closeAllSubmenus;
+  /** Closes sibling submenus at the same level as the specified item. */
+  private closeSiblingSubmenus;
+  /** Get the slotted trigger button, a <sigvelo-button> or <button> element */
+  private getTrigger;
+  /** Shows the dropdown menu. This should only be called from within updated(). */
+  private showMenu;
+  /** Hides the dropdown menu. This should only be called from within updated(). */
+  private hideMenu;
+  /** Repositions the dropdown menu */
+  private reposition;
+  /** If focus is set outside of the component, close the menu. */
+  private handleDocumentFocusIn;
+  /** Handles key down events when the menu is open */
+  private handleDocumentKeyDown;
+  /** Handles pointer down events when the dropdown is open. */
+  private handleDocumentPointerDown;
+  /** Handles clicks on the menu. */
+  private handleMenuClick;
+  /** Prepares dropdown items when they get added or removed */
+  private handleMenuSlotChange;
+  /** Toggles the dropdown menu */
+  private handleTriggerClick;
+  /** Given an x and y coordinate, a virtual element for Floating UI is returned.  */
+  private getContextMenuVirtualElement;
+  /** Shows the dropdown when the contextmenu event is dispatched. */
+  private handleContextMenu;
+  /** Handles submenu opening events */
+  private handleSubmenuOpening;
+  /** Sets up submenu positioning with autoUpdate */
+  private setupSubmenuPosition;
+  private static handleSubmenuSlotChange;
+  private processSubmenuItems;
+  /** Cleans up submenu positioning */
+  private cleanupSubmenuPosition;
+  /** Positions a submenu relative to its parent item */
+  private positionSubmenu;
+  /** Updates the safe triangle coordinates for a submenu */
+  private updateSafeTriangleCoordinates;
+  /** Handle global mouse movement for safe triangle logic */
+  private handleGlobalMouseMove;
+  /** Makes a selection, emits the sigvelo-select event, and closes the dropdown. */
+  private makeSelection;
+  /** Syncs aria attributes on the slotted trigger element and the menu based on the dropdown's current state */
+  private syncAriaAttributes;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-dropdown": SigveloDropdown;
+  }
+}
+//#endregion
+export { SigveloDropdown as t };

package/dist/dropdown-item-_lIs-Tfd.d.ts

@@ -0,0 +1,111 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/dropdown-item/dropdown-item.d.ts
+/**
+ * <sigvelo-dropdown-item>
+ *
+ * @summary Can be selected from inside a dropdown menu.
+ * @tag sigvelo-dropdown-item
+ * @documentation https://design-system.sigvelo.com/docs/components/dropdown-item
+ * @status stable
+ * @since 1.0
+ *
+ * @dependency sigvelo-icon
+ *
+ * @slot - The item's label or description.
+ * @slot icon - An optional icon to show at the start of the item.
+ * @slot details - Optional details, such as a keyboard shortcut, to display at the end of the item.
+ * @slot submenu - Optional submenu items to display in a nested dropdown. For best results, use `<sigvelo-submenu-item>`
+ *  and `<sigvelo-divider>` elements.
+ *
+ * @csspart checkmark - The checkmark icon that's shown when checked, a `<sigvelo-icon>` element.
+ * @csspart checkmark__svg - The checkmark icon's `svg` part.
+ * @csspart icon - The container that wraps the icon.
+ * @csspart label - The container that wraps the label.
+ * @csspart details - The container that wraps the menu item's details.
+ * @csspart submenu - The container that wraps the submenu items.
+ * @csspart submenu-icon - The icon indicating that a submenu is available.
+ * @csspart submenu-icon__svg - The submenu icon's `svg` part.
+ *
+ * @cssstate active - Applied when the dropdown item is active.
+ * @cssstate disabled - Applied when the dropdown item is disabled.
+ * @cssstate checked - Applied when the dropdown item is checked.
+ * @cssstate submenu-open - Applied when the dropdown item's submenu is open.
+ * @cssstate has-submenu - Applied when the dropdown item has a submenu.
+ *
+ * @example Default
+ * This component must only be used within a dropdown. You can see some examples of dropdown items being used in the dropdown documentation.
+ */
+declare class SigveloDropdownItem extends SigveloElement {
+  static styles: CSSResultGroup;
+  static observeSlots: boolean;
+  hiddenLink: HTMLAnchorElement;
+  submenuElement: HTMLDivElement;
+  /** @internal The controller will set this property to true when the item is active. */
+  active: boolean;
+  /**
+   * @internal The controller will set this property to true when at least one checkbox exists in the dropdown. This
+   * allows non-checkbox items to draw additional space to align properly with checkbox items.
+   */
+  checkboxAdjacent: boolean;
+  /**
+   * @internal The controller will set this property to true when at least one item with a submenu exists in the
+   * dropdown. This allows non-submenu items to draw additional space to align properly with items that have submenus.
+   */
+  submenuAdjacent: boolean;
+  /**
+   * An optional value for the menu item. This is useful for determining which item was selected when listening to the
+   * dropdown's `sigvelo-select` event.
+   */
+  value: string;
+  /** Set to `checkbox` to make the item a checkbox. */
+  type: "normal" | "checkbox";
+  /** The type of menu item to render. */
+  color: "destructive" | "neutral";
+  /** Set to true to check the dropdown item. Only valid when `type` is `checkbox`. */
+  checked: boolean;
+  /** Disables the dropdown item. */
+  disabled: boolean;
+  /** Whether the submenu is currently open. */
+  submenuOpen: boolean;
+  /** Tells the dropdown item to behave like a link. When selected, the browser will navigate to the target URL. */
+  href: string;
+  /** Opens the link in the specified target. Only works when `href` is provided. */
+  target: "_blank" | "_parent" | "_self" | "_top" | undefined;
+  /**
+   * Sets the link's `rel` attribute. Only works when `href` is provided. When linking to an external domain, you should
+   * probably set this to `noreferrer noopener`.
+   */
+  rel?: string;
+  /**
+   * Sets the link's `download` attribute, causing the linked file to be downloaded. Only works when `href` is provided.
+   */
+  download?: string;
+  /** @internal Store whether this item has a submenu */
+  hasSubmenu: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  /** Update the has-submenu custom state */
+  private updateHasSubmenuState;
+  /** Opens the submenu. */
+  openSubmenu(): Promise<void>;
+  /** Notifies the parent dropdown that this item is opening its submenu */
+  private notifyParentOfOpening;
+  /** Closes the submenu. */
+  closeSubmenu(): Promise<void>;
+  /** Gets all dropdown items in the submenu. */
+  private getSubmenuItems;
+  /** Handles mouse enter to open the submenu */
+  private handleMouseEnter;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-dropdown-item": SigveloDropdownItem;
+  }
+}
+//#endregion
+export { SigveloDropdownItem as t };