@winkintel/bootstrap-svelte 0.0.1

package/dist/Dropdown/composition.js

@@ -0,0 +1,7 @@
+export { default as Divider } from './dropdown-divider.svelte';
+export { default as Header } from './dropdown-header.svelte';
+export { default as ItemText } from './dropdown-item-text.svelte';
+export { default as Item } from './dropdown-item.svelte';
+export { default as Menu } from './dropdown-menu.svelte';
+export { default as Toggle } from './dropdown-toggle.svelte';
+export { default as Root } from './dropdown.svelte';

package/dist/Dropdown/dropdown-divider.svelte

@@ -0,0 +1,23 @@
+<!--
+@component
+## Dropdown.Divider
+A horizontal divider for separating dropdown items.
+
+@example
+```svelte
+<Dropdown.Divider />
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the divider.
+- `elementRef` (HTMLElement): Optional. Reference to the divider DOM element.
+- `listItemProps` (object): Optional. Additional properties to apply to the `<li>` element that wraps the divider.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { class: classValues, elementRef = $bindable(null), listItemProps, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('dropdown-divider', classValues));
+</script>
+
+<li {...listItemProps}>
+    <hr bind:this={elementRef} class={classes} {...restOfProps} />
+</li>

package/dist/Dropdown/dropdown-divider.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Dropdown } from './index.js';
+/**
+ * ## Dropdown.Divider
+ * A horizontal divider for separating dropdown items.
+ *
+ * @example
+ * ```svelte
+ * <Dropdown.Divider />
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the divider.
+ * - `elementRef` (HTMLElement): Optional. Reference to the divider DOM element.
+ * - `listItemProps` (object): Optional. Additional properties to apply to the `<li>` element that wraps the divider.
+ */
+declare const DropdownDivider: import("svelte").Component<Dropdown.DividerProps, {}, "elementRef">;
+type DropdownDivider = ReturnType<typeof DropdownDivider>;
+export default DropdownDivider;

package/dist/Dropdown/dropdown-header.svelte

@@ -0,0 +1,27 @@
+<!--
+@component
+## Dropdown.Header
+A header for grouping dropdown items.
+
+@example
+```svelte
+<Dropdown.Header>Group Title</Dropdown.Header>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the header.
+- `elementRef` (HTMLElement): Optional. Reference to the header DOM element.
+- `level` (number): Optional. Heading level for the header (default is 6).
+- `listItemProps` (object): Optional. Additional properties to apply to the `<li>` element that wraps the header.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, elementRef = $bindable(null), level = 6, listItemProps, ...restOfProps } = $props();
+let elementType = $derived(`h${level}`);
+let classes = $derived(uniqueClsx('dropdown-header', classValues));
+</script>
+
+<li {...listItemProps}>
+    <svelte:element this={elementType} bind:this={elementRef} class={classes} {...restOfProps}>
+        {@render children?.()}
+    </svelte:element>
+</li>

package/dist/Dropdown/dropdown-header.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Dropdown } from './index.js';
+/**
+ * ## Dropdown.Header
+ * A header for grouping dropdown items.
+ *
+ * @example
+ * ```svelte
+ * <Dropdown.Header>Group Title</Dropdown.Header>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the header.
+ * - `elementRef` (HTMLElement): Optional. Reference to the header DOM element.
+ * - `level` (number): Optional. Heading level for the header (default is 6).
+ * - `listItemProps` (object): Optional. Additional properties to apply to the `<li>` element that wraps the header.
+ */
+declare const DropdownHeader: import("svelte").Component<Dropdown.HeaderProps, {}, "elementRef">;
+type DropdownHeader = ReturnType<typeof DropdownHeader>;
+export default DropdownHeader;

package/dist/Dropdown/dropdown-item-text.svelte

@@ -0,0 +1,26 @@
+<!--
+@component
+## Dropdown.Text
+Text content within a dropdown menu.
+
+@example
+```svelte
+<Dropdown.Text>Some text here</Dropdown.Text>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the text.
+- `elementRef` (HTMLElement): Optional. Reference to the text DOM element.
+- `listItemProps` (object): Optional. Additional properties for the list item element.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, elementRef = $bindable(null), listItemProps, ...restOfProps } = $props();
+// Compute text classes
+let classes = $derived(uniqueClsx('dropdown-item-text', classValues));
+</script>
+
+<li {...listItemProps}>
+    <span bind:this={elementRef} class={classes} {...restOfProps}>
+        {@render children?.()}
+    </span>
+</li>

package/dist/Dropdown/dropdown-item-text.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Dropdown } from './index.js';
+/**
+ * ## Dropdown.Text
+ * Text content within a dropdown menu.
+ *
+ * @example
+ * ```svelte
+ * <Dropdown.Text>Some text here</Dropdown.Text>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the text.
+ * - `elementRef` (HTMLElement): Optional. Reference to the text DOM element.
+ * - `listItemProps` (object): Optional. Additional properties for the list item element.
+ */
+declare const DropdownItemText: import("svelte").Component<Dropdown.ItemTextProps, {}, "elementRef">;
+type DropdownItemText = ReturnType<typeof DropdownItemText>;
+export default DropdownItemText;

package/dist/Dropdown/dropdown-item.svelte

@@ -0,0 +1,86 @@
+<!--
+@component
+## Dropdown.Item
+A clickable item within a dropdown menu.
+
+@example
+```svelte
+<Dropdown.Item href="#!">Action</Dropdown.Item>
+<Dropdown.Item>Another action</Dropdown.Item>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the item.
+- `elementRef` (HTMLElement): Optional. Reference to the item DOM element.
+- `href` (string): Optional. URL for the item if it's a link, default is '#'.
+- `id` (string): Optional. Unique identifier for the item, default is `dropdown-item-{uid}`.
+- `isActive` (boolean): Optional. Makes the item appear active, default is false.
+- `isDisabled` (boolean): Optional. Disables the item, default is false.
+- `listItemProps` (object): Optional. Additional properties for the list item element.
+- `onclick` (EventListener): Optional. Click event handler for the item.
+-->
+<script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any -- restOfProps spread targets a union element type that is not spreadable without as any */
+import { uniqueClsx } from '../common/css.js';
+import { noop } from '../common/noop.js';
+import { DropdownItemState, initDropdownItemState } from './dropdown.svelte.js';
+// Generate a unique ID for the dropdown item
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), href, id = `dropdown-item-${uid}`, isActive = false, isDisabled = false, listItemProps, onclick = noop, onfocus = noop, onkeydown = noop, ...restOfProps } = $props();
+const itemState = initDropdownItemState({
+    get id() {
+        return id;
+    },
+    get elementRef() {
+        return elementRef;
+    },
+    get isActive() {
+        return isActive;
+    },
+    get isDisabled() {
+        return isDisabled;
+    }
+});
+let isAnchor = $derived(Boolean(href));
+let elementType = $derived(isAnchor ? 'a' : 'button');
+let classes = $derived(uniqueClsx('dropdown-item', {
+    active: isActive,
+    disabled: isDisabled
+}, classValues));
+const handleClick = (event) => {
+    if (href && href === '#!') {
+        event.preventDefault();
+    }
+    itemState.onclick(event);
+    onclick(event);
+};
+const handleKeydown = (event) => {
+    itemState.onkeydown(event);
+    onkeydown(event);
+};
+const handleFocus = (event) => {
+    itemState.onfocus(event);
+    onfocus(event);
+};
+// Note: itemState reads elementRef, isActive, and isDisabled reactively via the
+// getter-based props object passed to initDropdownItemState above — no manual
+// mirroring needed.
+</script>
+
+<li {...listItemProps}>
+    <svelte:element
+        this={elementType}
+        aria-disabled={isDisabled ? true : undefined}
+        bind:this={elementRef}
+        class={classes}
+        {href}
+        {id}
+        onclick={handleClick}
+        onfocus={handleFocus}
+        onkeydown={handleKeydown}
+        role="menuitem"
+        tabindex={isDisabled ? -1 : undefined}
+        type={isAnchor ? undefined : 'button'}
+        {...restOfProps as any}>
+        {@render children?.()}
+    </svelte:element>
+</li>

package/dist/Dropdown/dropdown-item.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Dropdown } from './index.js';
+/**
+ * ## Dropdown.Item
+ * A clickable item within a dropdown menu.
+ *
+ * @example
+ * ```svelte
+ * <Dropdown.Item href="#!">Action</Dropdown.Item>
+ * <Dropdown.Item>Another action</Dropdown.Item>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the item.
+ * - `elementRef` (HTMLElement): Optional. Reference to the item DOM element.
+ * - `href` (string): Optional. URL for the item if it's a link, default is '#'.
+ * - `id` (string): Optional. Unique identifier for the item, default is `dropdown-item-{uid}`.
+ * - `isActive` (boolean): Optional. Makes the item appear active, default is false.
+ * - `isDisabled` (boolean): Optional. Disables the item, default is false.
+ * - `listItemProps` (object): Optional. Additional properties for the list item element.
+ * - `onclick` (EventListener): Optional. Click event handler for the item.
+ */
+declare const DropdownItem: import("svelte").Component<Dropdown.ItemProps, {}, "elementRef">;
+type DropdownItem = ReturnType<typeof DropdownItem>;
+export default DropdownItem;

package/dist/Dropdown/dropdown-menu.svelte

@@ -0,0 +1,82 @@
+<!--
+@component
+## Dropdown.Menu
+The container for dropdown items.
+
+@example
+```svelte
+<Dropdown.Menu>
+    <Dropdown.Item href="#!">Action</Dropdown.Item>
+    <Dropdown.Item href="#!">Another action</Dropdown.Item>
+    <Dropdown.Divider/>
+    <Dropdown.Item href="#!">Something else here</Dropdown.Item>
+</Dropdown.Menu>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the dropdown menu.
+- `container` (string | HTMLElement | false): Optional. Specifies the container where the dropdown menu should be appended. Default is `false`.
+- `elementRef` (HTMLElement): Optional. Reference to the dropdown menu DOM element.
+- `id` (string): Optional. Unique identifier for the dropdown menu, default is `dropdown-menu-{uid}`.
+- `isDark` (boolean): Optional. Makes the dropdown menu dark-themed, default is false.
+- `isEnd` (boolean): Optional. Aligns the dropdown menu to the end of its parent, default is false.
+- `offset` (number[]): Optional. Offset for the dropdown menu position, default is `[0, 2]`.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { Portal } from '../index.js';
+import { onMount } from 'svelte';
+import { DropdownMenuState, initDropdownMenuState } from './dropdown.svelte.js';
+// Generate a unique ID for the dropdown menu
+const uid = $props.id();
+let { children, class: classValues, container = false, elementRef = $bindable(null), id = `dropdown-menu-${uid}`, isDark = false, isEnd = false, offset = [0, 2], ...restOfProps } = $props();
+let containerElement = $derived(container === false ? 'body' : container);
+const menuState = initDropdownMenuState({
+    get elementRef() {
+        return elementRef;
+    },
+    get id() {
+        return id;
+    },
+    get isEnd() {
+        return isEnd;
+    },
+    get offset() {
+        return offset;
+    }
+});
+// Compute menu classes
+let classes = $derived(uniqueClsx('dropdown-menu', {
+    'dropdown-menu-dark': isDark,
+    'dropdown-menu-end': isEnd,
+    show: menuState.isShown
+}, classValues));
+onMount(() => {
+    return () => {
+        menuState.dispose();
+    };
+});
+// Forward prop changes to the matching menuState setters so their side effects
+// run on every transition. The setters are idempotent.
+$effect(() => {
+    menuState.elementRef = elementRef;
+});
+$effect(() => {
+    menuState.isEnd = isEnd;
+});
+</script>
+
+<svelte:body onclick={menuState.bodyOnclick} />
+
+<Portal target={containerElement} disabled={container === false}>
+    <ul
+        aria-labelledby={menuState.ariaLabelledBy}
+        bind:this={elementRef}
+        class={classes}
+        data-bs-popper={menuState.isShown && menuState.root.isNavItem ? 'static' : undefined}
+        data-popper-placement={menuState.popperPlacement}
+        {id}
+        role={menuState.root.hasItems ? 'menu' : undefined}
+        {...restOfProps}>
+        {@render children?.()}
+    </ul>
+</Portal>

package/dist/Dropdown/dropdown-menu.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Dropdown } from './index.js';
+/**
+ * ## Dropdown.Menu
+ * The container for dropdown items.
+ *
+ * @example
+ * ```svelte
+ * <Dropdown.Menu>
+ * <Dropdown.Item href="#!">Action</Dropdown.Item>
+ * <Dropdown.Item href="#!">Another action</Dropdown.Item>
+ * <Dropdown.Divider/>
+ * <Dropdown.Item href="#!">Something else here</Dropdown.Item>
+ * </Dropdown.Menu>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the dropdown menu.
+ * - `container` (string | HTMLElement | false): Optional. Specifies the container where the dropdown menu should be appended. Default is `false`.
+ * - `elementRef` (HTMLElement): Optional. Reference to the dropdown menu DOM element.
+ * - `id` (string): Optional. Unique identifier for the dropdown menu, default is `dropdown-menu-{uid}`.
+ * - `isDark` (boolean): Optional. Makes the dropdown menu dark-themed, default is false.
+ * - `isEnd` (boolean): Optional. Aligns the dropdown menu to the end of its parent, default is false.
+ * - `offset` (number[]): Optional. Offset for the dropdown menu position, default is `[0, 2]`.
+ */
+declare const DropdownMenu: import("svelte").Component<Dropdown.MenuProps, {}, "elementRef">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/Dropdown/dropdown-toggle.svelte

@@ -0,0 +1,67 @@
+<!--
+@component
+## Dropdown.Toggle
+The button that triggers the dropdown menu.
+
+@example
+```svelte
+<Dropdown.Toggle colorVariant="success">Dropdown Button</Dropdown.Toggle>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the toggle button.
+- `colorVariant` (string): Optional. Button color variant, default is 'primary'.
+- `disabled` (boolean): Optional. Disables the button if true, default is false.
+- `elementRef` (HTMLElement): Optional. Reference to the button DOM element.
+- `href` (string): Optional. If provided, the button will render as an anchor tag.
+- `id` (string): Optional. Unique identifier for the button, default is `dropdown-toggle-{uid}`.
+- `isSplit` (boolean): Optional. Displays the button as a split button, default is false.
+- `size` (string): Optional. Button size: 'sm' or 'lg'.
+- `type` (string): Optional. Button type, default is 'button'.
+-->
+<script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any -- restOfProps spread targets a union element type that is not spreadable without as any */
+import { Button } from '../Button/index.js';
+import { uniqueClsx } from '../common/css.js';
+import { noop } from '../common/noop.js';
+import { DropdownToggleState, initDropdownToggleState } from './dropdown.svelte.js';
+// Generate a unique ID for the dropdown toggle
+const uid = $props.id();
+let { children, class: classValues, colorVariant, disabled = false, elementRef = $bindable(null), href, id = `dropdown-toggle-${uid}`, isSplit = false, onclick = noop, onkeydown = noop, size, type, ...restOfProps } = $props();
+const toggleState = initDropdownToggleState({
+    get id() {
+        return id;
+    },
+    get isSplit() {
+        return isSplit;
+    }
+});
+let classes = $derived(uniqueClsx('dropdown-toggle', { 'dropdown-toggle-split': isSplit }, classValues));
+const handleClick = (event) => {
+    toggleState.onclick(event);
+    onclick(event);
+};
+const handleKeydown = (event) => {
+    toggleState.onkeydown(event);
+    onkeydown(event);
+};
+</script>
+
+<Button
+    aria-expanded={toggleState.isShown}
+    bind:elementRef
+    class={classes}
+    {colorVariant}
+    {disabled}
+    {href}
+    {id}
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+    {size}
+    {type}
+    {...restOfProps as any}>
+    {#if isSplit}
+        <span class="visually-hidden">Toggle Dropdown</span>
+    {:else}
+        {@render children?.()}
+    {/if}
+</Button>

package/dist/Dropdown/dropdown-toggle.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Dropdown } from './index.js';
+/**
+ * ## Dropdown.Toggle
+ * The button that triggers the dropdown menu.
+ *
+ * @example
+ * ```svelte
+ * <Dropdown.Toggle colorVariant="success">Dropdown Button</Dropdown.Toggle>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the toggle button.
+ * - `colorVariant` (string): Optional. Button color variant, default is 'primary'.
+ * - `disabled` (boolean): Optional. Disables the button if true, default is false.
+ * - `elementRef` (HTMLElement): Optional. Reference to the button DOM element.
+ * - `href` (string): Optional. If provided, the button will render as an anchor tag.
+ * - `id` (string): Optional. Unique identifier for the button, default is `dropdown-toggle-{uid}`.
+ * - `isSplit` (boolean): Optional. Displays the button as a split button, default is false.
+ * - `size` (string): Optional. Button size: 'sm' or 'lg'.
+ * - `type` (string): Optional. Button type, default is 'button'.
+ */
+declare const DropdownToggle: import("svelte").Component<Dropdown.ToggleProps, {}, "elementRef">;
+type DropdownToggle = ReturnType<typeof DropdownToggle>;
+export default DropdownToggle;

package/dist/Dropdown/dropdown.svelte

@@ -0,0 +1,106 @@
+<!--
+@component
+## Dropdown
+Bootstrap's dropdown component provides a togglable overlay of links and actions.
+
+@example
+```svelte
+<Dropdown.Root>
+  <Dropdown.Toggle>Dropdown Button</Dropdown.Toggle>
+  <Dropdown.Menu>
+    <Dropdown.Item href="#!">Action</Dropdown.Item>
+    <Dropdown.Item href="#!">Another action</Dropdown.Item>
+    <Dropdown.Divider/>
+    <Dropdown.Item href="#!">Something else here</Dropdown.Item>
+  </Dropdown.Menu>
+</Dropdown.Root>
+```
+
+### Props
+- `autoClose` (boolean | 'inside' | 'outside'): Optional. Controls auto-closing behavior, default is true.
+- `class` (string): Optional. Additional CSS classes to apply to the dropdown.
+- `direction` (string): Optional. Direction of the dropdown menu: 'dropdown' (default), 'dropup', 'dropend', 'dropstart'.
+- `display` (string): Optional. Display mode of the dropdown: 'dynamic' (default), 'static'.
+- `elementRef` (HTMLElement): Optional. Reference to the dropdown DOM element.
+- `id` (string): Optional. Unique identifier for the dropdown, default is `dropdown-{uid}`.
+- `isButtonGroup` (boolean): Optional. If true, the dropdown is styled as part of a button group.
+- `onHide` (function): Optional. Callback when the dropdown is about to be hidden.
+- `onHidden` (function): Optional. Callback when the dropdown has been hidden.
+- `onShow` (function): Optional. Callback when the dropdown is about to be shown.
+- `onShown` (function): Optional. Callback when the dropdown has been shown.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { noop } from '../common/noop.js';
+import { DropdownRootState, initDropdownRootState } from './dropdown.svelte.js';
+// Generate a unique ID for the dropdown element, in case one is not provided
+const uid = $props.id();
+let { autoClose = true, children, class: classValues, direction = 'dropdown', display = 'dynamic', elementRef = $bindable(null), id = `dropdown-${uid}`, isButtonGroup = false, onHide = noop, onHidden = noop, onShow = noop, onShown = noop, ...restOfProps } = $props();
+const rootState = initDropdownRootState({
+    get autoClose() {
+        return autoClose;
+    },
+    get direction() {
+        return direction;
+    },
+    get display() {
+        return display;
+    },
+    get elementRef() {
+        return elementRef;
+    },
+    get id() {
+        return id;
+    },
+    get isButtonGroup() {
+        return isButtonGroup;
+    },
+    get onHide() {
+        return onHide;
+    },
+    get onHidden() {
+        return onHidden;
+    },
+    get onShow() {
+        return onShow;
+    },
+    get onShown() {
+        return onShown;
+    }
+});
+let elementType = $derived(rootState.isNavItem ? 'li' : 'div');
+let classes = $derived(uniqueClsx({
+    'nav-item': rootState.isNavItem,
+    'btn-group': rootState.isButtonGroup,
+    dropdown: ['dropdown', 'dropdown-end'].includes(rootState.direction),
+    'dropdown-center': rootState.direction === 'dropdown-center',
+    'dropdown-end': rootState.direction === 'dropdown-end',
+    dropup: ['dropup', 'dropup-end'].includes(rootState.direction),
+    'dropup-center': rootState.direction === 'dropup-center',
+    'dropup-end': rootState.direction === 'dropup-end',
+    dropend: rootState.direction === 'dropend',
+    dropstart: rootState.direction === 'dropstart'
+}, classValues));
+// Forward prop changes to the matching rootState setters so their side effects
+// (e.g. elementRef setter detecting nav-item parent) run on every transition.
+// The setters internally compare against their captured state, so calling them
+// on each prop change is safe and idempotent.
+$effect(() => {
+    rootState.autoClose = autoClose;
+});
+$effect(() => {
+    rootState.elementRef = elementRef;
+});
+$effect(() => {
+    rootState.direction = direction;
+});
+$effect(() => {
+    rootState.isButtonGroup = isButtonGroup;
+});
+$effect(() => {
+    rootState.display = display;
+});
+</script>
+
+<svelte:element this={elementType} bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/Dropdown/dropdown.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Dropdown } from './index.js';
+/**
+ * ## Dropdown
+ * Bootstrap's dropdown component provides a togglable overlay of links and actions.
+ *
+ * @example
+ * ```svelte
+ * <Dropdown.Root>
+ * <Dropdown.Toggle>Dropdown Button</Dropdown.Toggle>
+ * <Dropdown.Menu>
+ *   <Dropdown.Item href="#!">Action</Dropdown.Item>
+ *   <Dropdown.Item href="#!">Another action</Dropdown.Item>
+ *   <Dropdown.Divider/>
+ *   <Dropdown.Item href="#!">Something else here</Dropdown.Item>
+ * </Dropdown.Menu>
+ * </Dropdown.Root>
+ * ```
+ *
+ * ### Props
+ * - `autoClose` (boolean | 'inside' | 'outside'): Optional. Controls auto-closing behavior, default is true.
+ * - `class` (string): Optional. Additional CSS classes to apply to the dropdown.
+ * - `direction` (string): Optional. Direction of the dropdown menu: 'dropdown' (default), 'dropup', 'dropend', 'dropstart'.
+ * - `display` (string): Optional. Display mode of the dropdown: 'dynamic' (default), 'static'.
+ * - `elementRef` (HTMLElement): Optional. Reference to the dropdown DOM element.
+ * - `id` (string): Optional. Unique identifier for the dropdown, default is `dropdown-{uid}`.
+ * - `isButtonGroup` (boolean): Optional. If true, the dropdown is styled as part of a button group.
+ * - `onHide` (function): Optional. Callback when the dropdown is about to be hidden.
+ * - `onHidden` (function): Optional. Callback when the dropdown has been hidden.
+ * - `onShow` (function): Optional. Callback when the dropdown is about to be shown.
+ * - `onShown` (function): Optional. Callback when the dropdown has been shown.
+ */
+declare const Dropdown: import("svelte").Component<Dropdown.RootProps, {}, "elementRef">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;