@k2b/ui 0.1.0-rc.0

package/dist/browser/actions/Dropdown.js

@@ -0,0 +1,669 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-dropdown__copy><span></span><!$><!/>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<img class=k2b-dropdown__image alt>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<small>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<button type=button role=menuitem tabindex=-1>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<a role=menuitem tabindex=-1>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<i class="ti ti-check">`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<span class=k2b-dropdown__checkbox aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<i class="ti ti-check k2b-dropdown__check"aria-hidden=true>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<button type=button tabindex=-1><!$><!/><!$><!/><!$><!/><span class=k2b-dropdown__copy><span></span><!$><!/></span><!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-dropdown__color aria-hidden=true>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__section role=group><!$><!/><!$><!/>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__label>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<button>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<span><!$><!/><div popover=auto role=menu>`);
+import { createContext, createEffect, createSignal, createUniqueId, For, onCleanup, onMount, Show, splitProps, useContext } from "solid-js";
+import { Tooltip } from "../feedback/Tooltip";
+import { useUiMessages } from "../intl/messages";
+import { Button } from "./Button";
+
+/** Declarative radio or checkbox row for compact action menus. */
+
+const MenuContext = createContext();
+const DropdownContext = createContext();
+const actionableItems = menu => menu ? Array.from(menu.querySelectorAll(["[role='menuitem']:not([aria-disabled='true'])", "[role='menuitemcheckbox']:not([aria-disabled='true'])", "[role='menuitemradio']:not([aria-disabled='true'])"].join(", "))) : [];
+const focusMenuItem = (menu, index) => {
+  const items = actionableItems(menu);
+  if (items.length === 0) return;
+  items[(index + items.length) % items.length]?.focus();
+};
+export const dropdownPosition = (trigger, menu, position, viewport, gap = 4) => {
+  let left = trigger.left;
+  let top = trigger.bottom + gap;
+  if (position === "bottom-left" || position === "top-left") left = trigger.right - menu.width;
+  if (position === "top-right" || position === "top-left") top = trigger.top - menu.height - gap;
+  if (position === "right-start") {
+    left = trigger.right + gap;
+    top = trigger.top;
+  }
+  return {
+    left: Math.max(8, Math.min(left, viewport.width - menu.width - 8)),
+    top: Math.max(8, Math.min(top, viewport.height - menu.height - 8))
+  };
+};
+const itemContent = props => [_$createComponent(Show, {
+  get when() {
+    return props.image;
+  },
+  get fallback() {
+    return _$createComponent(Show, {
+      get when() {
+        return props.icon;
+      },
+      children: icon => (() => {
+        var _el$5 = _$getNextElement(_tmpl$2);
+        _$effect(() => _$className(_el$5, icon()));
+        return _el$5;
+      })()
+    });
+  },
+  children: image => (() => {
+    var _el$6 = _$getNextElement(_tmpl$3);
+    _$effect(() => _$setAttribute(_el$6, "src", image()));
+    return _el$6;
+  })()
+}), (() => {
+  var _el$ = _$getNextElement(_tmpl$),
+    _el$2 = _el$.firstChild,
+    _el$3 = _el$2.nextSibling,
+    [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling);
+  _$insert(_el$2, () => props.children);
+  _$insert(_el$, _$createComponent(Show, {
+    get when() {
+      return props.description;
+    },
+    children: description => (() => {
+      var _el$7 = _$getNextElement(_tmpl$4);
+      _$insert(_el$7, description);
+      return _el$7;
+    })()
+  }), _el$4, _co$);
+  return _el$;
+})()];
+export function DropdownItem(props) {
+  const menu = useContext(MenuContext);
+  const danger = () => props.danger || props.variant === "danger";
+  const content = itemContent(props);
+  return _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!!props.disabled)() ? props.href : undefined;
+    },
+    get fallback() {
+      return (() => {
+        var _el$8 = _$getNextElement(_tmpl$5);
+        _el$8.$$click = event => {
+          event.preventDefault();
+          event.stopPropagation();
+          menu?.close();
+          props.onSelect?.();
+        };
+        _$insert(_el$8, content);
+        _$effect(_p$ => {
+          var _v$ = `k2b-dropdown__item ${props.class ?? ""}`,
+            _v$2 = danger() ? "true" : undefined,
+            _v$3 = props.disabled,
+            _v$4 = props.disabled ? "true" : undefined;
+          _v$ !== _p$.e && _$className(_el$8, _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute(_el$8, "data-danger", _p$.t = _v$2);
+          _v$3 !== _p$.a && _$setProperty(_el$8, "disabled", _p$.a = _v$3);
+          _v$4 !== _p$.o && _$setAttribute(_el$8, "aria-disabled", _p$.o = _v$4);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined
+        });
+        _$runHydrationEvents();
+        return _el$8;
+      })();
+    },
+    children: href => (() => {
+      var _el$9 = _$getNextElement(_tmpl$6);
+      _el$9.$$click = () => {
+        menu?.close(false);
+        props.onSelect?.();
+      };
+      _$insert(_el$9, content);
+      _$effect(_p$ => {
+        var _v$5 = href(),
+          _v$6 = props.external ? "_blank" : undefined,
+          _v$7 = props.external ? "noopener noreferrer" : undefined,
+          _v$8 = `k2b-dropdown__item ${props.class ?? ""}`,
+          _v$9 = danger() ? "true" : undefined;
+        _v$5 !== _p$.e && _$setAttribute(_el$9, "href", _p$.e = _v$5);
+        _v$6 !== _p$.t && _$setAttribute(_el$9, "target", _p$.t = _v$6);
+        _v$7 !== _p$.a && _$setAttribute(_el$9, "rel", _p$.a = _v$7);
+        _v$8 !== _p$.o && _$className(_el$9, _p$.o = _v$8);
+        _v$9 !== _p$.i && _$setAttribute(_el$9, "data-danger", _p$.i = _v$9);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined
+      });
+      _$runHydrationEvents();
+      return _el$9;
+    })()
+  });
+}
+function DropdownChoiceItem(props) {
+  const menu = useContext(MenuContext);
+  const checked = () => typeof props.checked === "function" ? props.checked() : props.checked;
+  return (// biome-ignore lint/a11y/useAriaPropsSupportedByRole: the runtime role is always menuitemcheckbox or menuitemradio, both of which support aria-checked.
+    (() => {
+      var _el$0 = _$getNextElement(_tmpl$0),
+        _el$16 = _el$0.firstChild,
+        [_el$17, _co$3] = _$getNextMarker(_el$16.nextSibling),
+        _el$18 = _el$17.nextSibling,
+        [_el$19, _co$4] = _$getNextMarker(_el$18.nextSibling),
+        _el$20 = _el$19.nextSibling,
+        [_el$21, _co$5] = _$getNextMarker(_el$20.nextSibling),
+        _el$11 = _el$21.nextSibling,
+        _el$12 = _el$11.firstChild,
+        _el$13 = _el$12.nextSibling,
+        [_el$14, _co$2] = _$getNextMarker(_el$13.nextSibling),
+        _el$22 = _el$11.nextSibling,
+        [_el$23, _co$6] = _$getNextMarker(_el$22.nextSibling);
+      _el$0.$$click = event => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (props.closeOnSelect !== false) menu?.close();
+        props.action();
+      };
+      _$insert(_el$0, _$createComponent(Show, {
+        get when() {
+          return props.choice === "checkbox";
+        },
+        get children() {
+          var _el$1 = _$getNextElement(_tmpl$8);
+          _$insert(_el$1, _$createComponent(Show, {
+            get when() {
+              return checked();
+            },
+            get children() {
+              return _$getNextElement(_tmpl$7);
+            }
+          }));
+          return _el$1;
+        }
+      }), _el$17, _co$3);
+      _$insert(_el$0, _$createComponent(Show, {
+        get when() {
+          return props.image;
+        },
+        get fallback() {
+          return _$createComponent(Show, {
+            get when() {
+              return props.icon;
+            },
+            children: icon => (() => {
+              var _el$24 = _$getNextElement(_tmpl$2);
+              _$effect(() => _$className(_el$24, icon()));
+              return _el$24;
+            })()
+          });
+        },
+        children: image => (() => {
+          var _el$25 = _$getNextElement(_tmpl$3);
+          _$effect(() => _$setAttribute(_el$25, "src", image()));
+          return _el$25;
+        })()
+      }), _el$19, _co$4);
+      _$insert(_el$0, _$createComponent(Show, {
+        get when() {
+          return props.color;
+        },
+        children: color => (() => {
+          var _el$26 = _$getNextElement(_tmpl$1);
+          _$effect(_$p => _$setStyleProperty(_el$26, "--k2b-dropdown-color", color()));
+          return _el$26;
+        })()
+      }), _el$21, _co$5);
+      _$insert(_el$12, () => props.label);
+      _$insert(_el$11, _$createComponent(Show, {
+        get when() {
+          return props.description;
+        },
+        children: description => (() => {
+          var _el$27 = _$getNextElement(_tmpl$4);
+          _$insert(_el$27, description);
+          return _el$27;
+        })()
+      }), _el$14, _co$2);
+      _$insert(_el$0, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => props.choice === "radio")() && checked();
+        },
+        get children() {
+          return _$getNextElement(_tmpl$9);
+        }
+      }), _el$23, _co$6);
+      _$effect(_p$ => {
+        var _v$0 = props.choice === "checkbox" ? "menuitemcheckbox" : "menuitemradio",
+          _v$1 = checked(),
+          _v$10 = props.disabled ? "true" : undefined,
+          _v$11 = `k2b-dropdown__item ${props.class ?? ""}`,
+          _v$12 = checked() ? "true" : undefined,
+          _v$13 = props.disabled;
+        _v$0 !== _p$.e && _$setAttribute(_el$0, "role", _p$.e = _v$0);
+        _v$1 !== _p$.t && _$setAttribute(_el$0, "aria-checked", _p$.t = _v$1);
+        _v$10 !== _p$.a && _$setAttribute(_el$0, "aria-disabled", _p$.a = _v$10);
+        _v$11 !== _p$.o && _$className(_el$0, _p$.o = _v$11);
+        _v$12 !== _p$.i && _$setAttribute(_el$0, "data-selected", _p$.i = _v$12);
+        _v$13 !== _p$.n && _$setProperty(_el$0, "disabled", _p$.n = _v$13);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined
+      });
+      _$runHydrationEvents();
+      return _el$0;
+    })()
+  );
+}
+export function DropdownItems(props) {
+  const messages = useUiMessages();
+  const renderItem = item => "choice" in item ? _$createComponent(DropdownChoiceItem, item) : _$createComponent(DropdownItem, {
+    get icon() {
+      return item.icon;
+    },
+    get image() {
+      return item.image;
+    },
+    get description() {
+      return item.description;
+    },
+    get variant() {
+      return item.variant;
+    },
+    get disabled() {
+      return item.disabled;
+    },
+    get ["class"]() {
+      return item.class;
+    },
+    get href() {
+      return _$memo(() => "href" in item)() ? item.href : undefined;
+    },
+    get external() {
+      return _$memo(() => "external" in item)() ? item.external : undefined;
+    },
+    get onSelect() {
+      return _$memo(() => "action" in item)() ? item.action : undefined;
+    },
+    get children() {
+      return item.label;
+    }
+  });
+  return _$createComponent(MenuContext.Provider, {
+    get value() {
+      return {
+        close: props.close
+      };
+    },
+    get children() {
+      return _$createComponent(For, {
+        get each() {
+          return props.items;
+        },
+        children: (item, index) => _$createComponent(Show, {
+          get when() {
+            return "items" in item;
+          },
+          get fallback() {
+            return renderItem(item);
+          },
+          get children() {
+            var _el$28 = _$getNextElement(_tmpl$10),
+              _el$29 = _el$28.firstChild,
+              [_el$30, _co$7] = _$getNextMarker(_el$29.nextSibling),
+              _el$31 = _el$30.nextSibling,
+              [_el$32, _co$8] = _$getNextMarker(_el$31.nextSibling);
+            _$insert(_el$28, _$createComponent(Show, {
+              get when() {
+                return item.sectionLabel;
+              },
+              children: label => (() => {
+                var _el$33 = _$getNextElement(_tmpl$11);
+                _$insert(_el$33, label);
+                return _el$33;
+              })()
+            }), _el$30, _co$7);
+            _$insert(_el$28, _$createComponent(For, {
+              get each() {
+                return item.items;
+              },
+              children: renderItem
+            }), _el$32, _co$8);
+            _$effect(_p$ => {
+              var _v$14 = index() > 0 ? "true" : undefined,
+                _v$15 = item.sectionLabel ?? messages().actions;
+              _v$14 !== _p$.e && _$setAttribute(_el$28, "data-divided", _p$.e = _v$14);
+              _v$15 !== _p$.t && _$setAttribute(_el$28, "aria-label", _p$.t = _v$15);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$28;
+          }
+        })
+      });
+    }
+  });
+}
+function DropdownTrigger(props) {
+  const context = useContext(DropdownContext);
+  if (!context) throw new Error("Dropdown.Trigger must be used inside Dropdown.Root");
+  const [local, rest] = splitProps(props, ["appearance", "children", "class", "disabled", "iconOnly", "label", "ref", "size", "tabIndex", "tooltip", "tooltipDelay", "tooltipPlacement", "type", "variant"]);
+  let target;
+  const disabled = () => Boolean(context.disabled() || local.disabled);
+  const register = element => {
+    target = element;
+    context.registerTrigger(element);
+    if (typeof local.ref === "function") local.ref(element);
+  };
+  const click = event => {
+    event.stopPropagation();
+    context.toggle();
+  };
+  if (local.appearance !== "plain") {
+    return _$createComponent(Button, _$mergeProps(rest, {
+      ref: register,
+      get ["aria-controls"]() {
+        return context.menuId;
+      },
+      get ["aria-expanded"]() {
+        return context.open();
+      },
+      "aria-haspopup": "menu",
+      get ["aria-label"]() {
+        return local.label;
+      },
+      get disabled() {
+        return disabled();
+      },
+      get tabIndex() {
+        return _$memo(() => !!disabled())() ? -1 : local.tabIndex;
+      },
+      onClick: click,
+      get onKeyDown() {
+        return context.triggerKeyDown;
+      },
+      get type() {
+        return local.type ?? "button";
+      },
+      get ["class"]() {
+        return `${local.iconOnly ? "k2b-icon-button" : ""} k2b-dropdown__trigger ${local.class ?? ""}`;
+      },
+      get size() {
+        return local.size;
+      },
+      get variant() {
+        return local.variant ?? (local.iconOnly ? "ghost" : undefined);
+      },
+      get tooltip() {
+        return local.tooltip;
+      },
+      get tooltipDelay() {
+        return local.tooltipDelay;
+      },
+      get tooltipPlacement() {
+        return local.tooltipPlacement;
+      },
+      get children() {
+        return local.children;
+      }
+    }));
+  }
+  return [(() => {
+    var _el$34 = _$getNextElement(_tmpl$12);
+    _$use(register, _el$34);
+    _$spread(_el$34, _$mergeProps(rest, {
+      get ["aria-controls"]() {
+        return context.menuId;
+      },
+      get ["aria-expanded"]() {
+        return context.open();
+      },
+      "aria-haspopup": "menu",
+      get ["aria-label"]() {
+        return local.label;
+      },
+      get disabled() {
+        return disabled();
+      },
+      get tabIndex() {
+        return _$memo(() => !!disabled())() ? -1 : local.tabIndex;
+      },
+      "onClick": click,
+      get onKeyDown() {
+        return context.triggerKeyDown;
+      },
+      get type() {
+        return local.type ?? "button";
+      },
+      get ["class"]() {
+        return `k2b-dropdown__trigger ${local.class ?? ""}`;
+      }
+    }), false, true);
+    _$insert(_el$34, () => local.children);
+    _$runHydrationEvents();
+    return _el$34;
+  })(), _$createComponent(Show, {
+    get when() {
+      return _$memo(() => local.tooltip !== false)() && local.tooltip !== undefined;
+    },
+    get children() {
+      return _$createComponent(Tooltip, {
+        get content() {
+          return local.tooltip;
+        },
+        target: () => target,
+        get delay() {
+          return local.tooltipDelay;
+        },
+        get disabled() {
+          return disabled();
+        },
+        get placement() {
+          return local.tooltipPlacement;
+        }
+      });
+    }
+  })];
+}
+
+/** Accessible top-layer menu with explicit trigger ownership. */
+function DropdownRoot(props) {
+  const messages = useUiMessages();
+  const id = createUniqueId().replace(/[^a-zA-Z0-9_-]/g, "-");
+  const menuId = `k2b-dropdown-${id}`;
+  const [internalOpen, setInternalOpen] = createSignal(false);
+  let triggerRef;
+  let menuRef;
+  let mounted = false;
+  let viewportListenersAttached = false;
+  const isOpen = () => props.open ?? internalOpen();
+  const position = () => typeof props.position === "function" ? props.position() : props.position ?? (props.align === "end" ? "bottom-left" : "bottom-right");
+  const place = () => {
+    if (!triggerRef || !menuRef) return;
+    const rect = dropdownPosition(triggerRef.getBoundingClientRect(), menuRef.getBoundingClientRect(), position(), {
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+    menuRef.style.left = `${rect.left}px`;
+    menuRef.style.top = `${rect.top}px`;
+  };
+  const reposition = () => {
+    if (isOpen()) place();
+  };
+  const attachViewportListeners = () => {
+    if (viewportListenersAttached) return;
+    viewportListenersAttached = true;
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+  };
+  const detachViewportListeners = () => {
+    if (!viewportListenersAttached) return;
+    viewportListenersAttached = false;
+    window.removeEventListener("resize", reposition);
+    window.removeEventListener("scroll", reposition, true);
+  };
+  const close = (restoreFocus = true) => {
+    if (menuRef?.matches(":popover-open")) menuRef.hidePopover();
+    detachViewportListeners();
+    if (restoreFocus) queueMicrotask(() => triggerRef?.focus());
+  };
+  const open = (focus = "first") => {
+    if (props.disabled || !menuRef || menuRef.matches(":popover-open")) return;
+    menuRef.showPopover();
+    attachViewportListeners();
+    place();
+    queueMicrotask(() => {
+      if (focus) focusMenuItem(menuRef, focus === "first" ? 0 : -1);
+    });
+  };
+  const requestOpen = (next, focus = "first") => {
+    if (props.disabled && next) return;
+    if (props.open !== undefined) {
+      props.onOpenChange?.(next);
+      return;
+    }
+    if (next) open(focus);else close(false);
+  };
+  const handleMenuKeyDown = event => {
+    const items = actionableItems(menuRef);
+    const current = items.indexOf(document.activeElement);
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      focusMenuItem(menuRef, current + (event.key === "ArrowDown" ? 1 : -1));
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      focusMenuItem(menuRef, event.key === "Home" ? 0 : -1);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      requestOpen(false);
+      queueMicrotask(() => triggerRef?.focus());
+    } else if (event.key === "Tab") {
+      requestOpen(false);
+    }
+  };
+  const context = {
+    disabled: () => Boolean(props.disabled),
+    menuId,
+    open: isOpen,
+    registerTrigger: element => {
+      triggerRef = element;
+    },
+    toggle: () => requestOpen(!isOpen()),
+    triggerKeyDown: event => {
+      if (!["Enter", " ", "ArrowDown", "ArrowUp"].includes(event.key)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (isOpen()) {
+        focusMenuItem(menuRef, event.key === "ArrowUp" ? -1 : 0);
+        return;
+      }
+      requestOpen(true, event.key === "ArrowUp" ? "last" : "first");
+    }
+  };
+  createEffect(() => {
+    const controlled = props.open;
+    if (!mounted || controlled === undefined || !menuRef) return;
+    if (controlled && !menuRef.matches(":popover-open")) open(false);
+    if (!controlled && menuRef.matches(":popover-open")) close(false);
+  });
+  createEffect(() => {
+    if (mounted && props.disabled) close(false);
+  });
+  onMount(() => {
+    mounted = true;
+    if (props.open) open(false);
+    onCleanup(detachViewportListeners);
+  });
+  return _$createComponent(DropdownContext.Provider, {
+    value: context,
+    get children() {
+      var _el$35 = _$getNextElement(_tmpl$13),
+        _el$37 = _el$35.firstChild,
+        [_el$38, _co$9] = _$getNextMarker(_el$37.nextSibling),
+        _el$36 = _el$38.nextSibling;
+      _$insert(_el$35, () => props.children, _el$38, _co$9);
+      _el$36.addEventListener("toggle", event => {
+        const nextOpen = event.newState === "open";
+        const wasOpen = internalOpen();
+        setInternalOpen(nextOpen);
+        if (nextOpen) attachViewportListeners();else detachViewportListeners();
+        if (props.open === undefined || props.open !== nextOpen) props.onOpenChange?.(nextOpen);
+        if (wasOpen && !nextOpen) props.onClose?.();
+        if (!nextOpen && props.open === true) queueMicrotask(() => props.open === true && open(false));
+      });
+      _el$36.$$keydown = handleMenuKeyDown;
+      var _ref$ = menuRef;
+      typeof _ref$ === "function" ? _$use(_ref$, _el$36) : menuRef = _el$36;
+      _$setAttribute(_el$36, "id", menuId);
+      _$insert(_el$36, _$createComponent(DropdownItems, {
+        get items() {
+          return props.items;
+        },
+        close: close
+      }));
+      _$effect(_p$ => {
+        var _v$16 = `k2b-dropdown ${props.class ?? ""}`,
+          _v$17 = props.label ?? messages().dropdownMenu,
+          _v$18 = `k2b-dropdown__menu ${props.menuClass ?? ""}`,
+          _v$19 = props.width ? {
+            "--k2b-dropdown-width": props.width
+          } : undefined,
+          _v$20 = position();
+        _v$16 !== _p$.e && _$className(_el$35, _p$.e = _v$16);
+        _v$17 !== _p$.t && _$setAttribute(_el$36, "aria-label", _p$.t = _v$17);
+        _v$18 !== _p$.a && _$className(_el$36, _p$.a = _v$18);
+        _p$.o = _$style(_el$36, _v$19, _p$.o);
+        _v$20 !== _p$.i && _$setAttribute(_el$36, "data-position", _p$.i = _v$20);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined
+      });
+      _$runHydrationEvents();
+      return _el$35;
+    }
+  });
+}
+export const Dropdown = DropdownRoot;
+Dropdown.Root = DropdownRoot;
+Dropdown.Trigger = DropdownTrigger;
+Dropdown.Item = DropdownItem;
+export default Dropdown;
+_$delegateEvents(["click", "keydown"]);
+//# sourceMappingURL=Dropdown.js.map