@k2b/ui 0.41.0 → 0.42.0

package/dist/base.css

@@ -447,6 +447,28 @@
     margin: 0;
   }
 
+  /* Not the native box: it ignores border-radius, so it could not match the
+     @k2b/ui checkbox. Radio buttons stay native; they are round anyway. */
+  input[type="checkbox"] {
+    box-sizing: border-box;
+    appearance: none;
+    border: 1px solid var(--k2b-border-strong);
+    border-radius: 0.25rem;
+    background: var(--k2b-surface);
+    cursor: pointer;
+  }
+
+  input[type="checkbox"]:checked {
+    border-color: var(--k2b-action-solid);
+    /* Two gradient strokes, not an image: a host's img-src policy may refuse a
+       data: URL, and an input has no reliable pseudo-element in every engine. */
+    background:
+      linear-gradient(45deg, transparent 27%, #fff 29.5%, #fff 49.2%, transparent 51.7%) 23.08% 0 / 22% 100% no-repeat,
+      linear-gradient(135deg, transparent 41.1%, #fff 43.6%, #fff 60.6%, transparent 63.1%) 68.97% 0 / 42% 100% no-repeat,
+      var(--k2b-action-solid);
+    forced-color-adjust: none;
+  }
+
   input[type="range"] {
     width: 100%;
   }

package/dist/browser/actions/Dropdown.js

@@ -19,20 +19,22 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-dropdown__copy><span></spa
   _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$5 = /*#__PURE__*/_$template(`<button type=button tabindex=-1>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<a tabindex=-1>`),
   _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__pair><!$><!/><!$><!/>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<i class="ti ti-check">`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-dropdown__checkbox aria-hidden=true>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<i class="ti ti-check k2b-dropdown__check"aria-hidden=true>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-dropdown__color aria-hidden=true>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__row>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__section role=group><!$><!/><!$><!/>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__label>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div class="k2b-dropdown__label k2b-dropdown__label--action"><span></span><!$><!/>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<button>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<span><!$><!/><div popover=auto role=menu>`);
-import { createContext, createEffect, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, splitProps, untrack, useContext } from "solid-js";
+  _tmpl$8 = /*#__PURE__*/_$template(`<button type=button role=menuitem tabindex=-1>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<i class="ti ti-check">`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<span class=k2b-dropdown__checkbox aria-hidden=true>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<i class="ti ti-check k2b-dropdown__check"aria-hidden=true>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-dropdown__color aria-hidden=true>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__row>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__section role=group><!$><!/><!$><!/>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__label>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class="k2b-dropdown__label k2b-dropdown__label--action"><span></span><!$><!/>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<button>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<p class=k2b-dropdown__note aria-hidden=true>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<span><!$><!/><div popover=auto>`);
+import { createContext, createEffect, createSignal, createUniqueId, mergeProps, onCleanup, onMount, Show, splitProps, untrack, useContext } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { Tooltip, useLabelTooltip } from "../feedback/Tooltip";
 import { returnFocus, ringOnReturn } from "../internal/focus-return";
@@ -41,6 +43,7 @@ import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { Button, iconTitle } from "./Button";
 import { focusMenuRow, focusRowSegment } from "./menu-rows";
+import { MenuSearch } from "./menu-search";
 import { openMenuSheet, prefersMenuSheet } from "./menu-sheet";
 
 // Resolved outside JSX: a conditional attribute compiles to a lazy memo, which would be created inside the click handler.
@@ -57,9 +60,11 @@ const externalOf = item => "external" in item ? item.external : undefined;
 
 /** Declarative radio or checkbox row for compact action menus. */
 
+/** A search field above the entries, for a menu long enough that finding an entry takes reading. */
+
 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 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'])", "[role='option']:not([aria-disabled='true'])"].join(", "))) : [];
 const focusMenuItem = (menu, index) => {
   const items = actionableItems(menu).filter(item => !item.classList.contains("k2b-dropdown__secondary"));
   if (items.length === 0) return;
@@ -121,6 +126,7 @@ const itemContent = props => [_$createComponent(Show, {
 export function DropdownItem(props) {
   const menu = useContext(MenuContext);
   const danger = () => props.danger || props.variant === "danger";
+  const role = () => menu?.role ?? "menuitem";
   const content = itemContent(props);
   return _$createComponent(Show, {
     get when() {
@@ -132,28 +138,36 @@ export function DropdownItem(props) {
         _el$8.$$click = event => {
           event.preventDefault();
           event.stopPropagation();
+          // Read before closing: a searchable menu clears its query as it closes, and the row then shows another entry.
+          const select = props.onSelect;
           if (props.closeOnSelect !== false) menu?.close();
-          props.onSelect?.();
+          select?.();
         };
         _$insert(_el$8, content);
         _$effect(_p$ => {
-          var _v$ = props.ariaLabel,
-            _v$2 = `k2b-dropdown__item ${props.class ?? ""}`,
-            _v$3 = danger() ? "true" : undefined,
-            _v$4 = props.disabled,
-            _v$5 = props.disabled ? "true" : undefined;
-          _v$ !== _p$.e && _$setAttribute(_el$8, "aria-label", _p$.e = _v$);
-          _v$2 !== _p$.t && _$className(_el$8, _p$.t = _v$2);
-          _v$3 !== _p$.a && _$setAttribute(_el$8, "data-danger", _p$.a = _v$3);
-          _v$4 !== _p$.o && _$setProperty(_el$8, "disabled", _p$.o = _v$4);
-          _v$5 !== _p$.i && _$setAttribute(_el$8, "aria-disabled", _p$.i = _v$5);
+          var _v$ = role(),
+            _v$2 = props.ariaLabel,
+            _v$3 = `k2b-dropdown__item ${props.class ?? ""}`,
+            _v$4 = danger() ? "true" : undefined,
+            _v$5 = props.variant === "accent" ? "true" : undefined,
+            _v$6 = props.disabled,
+            _v$7 = props.disabled ? "true" : undefined;
+          _v$ !== _p$.e && _$setAttribute(_el$8, "role", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute(_el$8, "aria-label", _p$.t = _v$2);
+          _v$3 !== _p$.a && _$className(_el$8, _p$.a = _v$3);
+          _v$4 !== _p$.o && _$setAttribute(_el$8, "data-danger", _p$.o = _v$4);
+          _v$5 !== _p$.i && _$setAttribute(_el$8, "data-accent", _p$.i = _v$5);
+          _v$6 !== _p$.n && _$setProperty(_el$8, "disabled", _p$.n = _v$6);
+          _v$7 !== _p$.s && _$setAttribute(_el$8, "aria-disabled", _p$.s = _v$7);
           return _p$;
         }, {
           e: undefined,
           t: undefined,
           a: undefined,
           o: undefined,
-          i: undefined
+          i: undefined,
+          n: undefined,
+          s: undefined
         });
         _$runHydrationEvents();
         return _el$8;
@@ -163,28 +177,33 @@ export function DropdownItem(props) {
       var _el$9 = _$getNextElement(_tmpl$6);
       _el$9.$$click = event => {
         // With `onSelect`, a plain click runs it in place of the link; a modified click keeps its browser meaning.
-        if (props.onSelect && !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
+        const select = props.onSelect;
+        if (select && !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
           event.preventDefault();
           menu?.close();
-          props.onSelect();
+          select();
           return;
         }
         menu?.close(false);
       };
       _$insert(_el$9, content);
       _$effect(_p$ => {
-        var _v$6 = href(),
-          _v$7 = props.external ? "_blank" : undefined,
-          _v$8 = props.external ? "noopener noreferrer" : undefined,
-          _v$9 = props.ariaLabel,
-          _v$0 = `k2b-dropdown__item ${props.class ?? ""}`,
-          _v$1 = danger() ? "true" : undefined;
-        _v$6 !== _p$.e && _$setAttribute(_el$9, "href", _p$.e = _v$6);
-        _v$7 !== _p$.t && _$setAttribute(_el$9, "target", _p$.t = _v$7);
-        _v$8 !== _p$.a && _$setAttribute(_el$9, "rel", _p$.a = _v$8);
-        _v$9 !== _p$.o && _$setAttribute(_el$9, "aria-label", _p$.o = _v$9);
-        _v$0 !== _p$.i && _$className(_el$9, _p$.i = _v$0);
-        _v$1 !== _p$.n && _$setAttribute(_el$9, "data-danger", _p$.n = _v$1);
+        var _v$8 = href(),
+          _v$9 = props.external ? "_blank" : undefined,
+          _v$0 = props.external ? "noopener noreferrer" : undefined,
+          _v$1 = role(),
+          _v$10 = props.ariaLabel,
+          _v$11 = `k2b-dropdown__item ${props.class ?? ""}`,
+          _v$12 = danger() ? "true" : undefined,
+          _v$13 = props.variant === "accent" ? "true" : undefined;
+        _v$8 !== _p$.e && _$setAttribute(_el$9, "href", _p$.e = _v$8);
+        _v$9 !== _p$.t && _$setAttribute(_el$9, "target", _p$.t = _v$9);
+        _v$0 !== _p$.a && _$setAttribute(_el$9, "rel", _p$.a = _v$0);
+        _v$1 !== _p$.o && _$setAttribute(_el$9, "role", _p$.o = _v$1);
+        _v$10 !== _p$.i && _$setAttribute(_el$9, "aria-label", _p$.i = _v$10);
+        _v$11 !== _p$.n && _$className(_el$9, _p$.n = _v$11);
+        _v$12 !== _p$.s && _$setAttribute(_el$9, "data-danger", _p$.s = _v$12);
+        _v$13 !== _p$.h && _$setAttribute(_el$9, "data-accent", _p$.h = _v$13);
         return _p$;
       }, {
         e: undefined,
@@ -192,7 +211,9 @@ export function DropdownItem(props) {
         a: undefined,
         o: undefined,
         i: undefined,
-        n: undefined
+        n: undefined,
+        s: undefined,
+        h: undefined
       });
       _$runHydrationEvents();
       return _el$9;
@@ -200,9 +221,11 @@ export function DropdownItem(props) {
   });
 }
 function DropdownChoiceItem(props) {
+  const menu = useContext(MenuContext);
+  // A searchable menu's field keeps the focus, so a second button in a row could not be reached; it is left out.
   return _$createComponent(Show, {
     get when() {
-      return props.secondary;
+      return _$memo(() => menu?.role !== "option")() && props.secondary;
     },
     get fallback() {
       return _$createComponent(DropdownChoiceRow, props);
@@ -223,7 +246,7 @@ function DropdownChoiceItem(props) {
 }
 function DropdownSecondaryButton(props) {
   return (() => {
-    var _el$13 = _$getNextElement(_tmpl$5);
+    var _el$13 = _$getNextElement(_tmpl$8);
     _el$13.$$click = event => {
       event.preventDefault();
       event.stopPropagation();
@@ -231,10 +254,10 @@ function DropdownSecondaryButton(props) {
     };
     _$insert(_el$13, () => props.label);
     _$effect(_p$ => {
-      var _v$10 = props.class,
-        _v$11 = props.ariaLabel;
-      _v$10 !== _p$.e && _$className(_el$13, _p$.e = _v$10);
-      _v$11 !== _p$.t && _$setAttribute(_el$13, "aria-label", _p$.t = _v$11);
+      var _v$14 = props.class,
+        _v$15 = props.ariaLabel;
+      _v$14 !== _p$.e && _$className(_el$13, _p$.e = _v$14);
+      _v$15 !== _p$.t && _$setAttribute(_el$13, "aria-label", _p$.t = _v$15);
       return _p$;
     }, {
       e: undefined,
@@ -262,7 +285,7 @@ function DropdownChoiceRow(props) {
       return !props.disabled && props.href ? undefined : "button";
     },
     get role() {
-      return props.choice === "checkbox" ? "menuitemcheckbox" : "menuitemradio";
+      return _$memo(() => menu?.role === "option")() ? "option" : props.choice === "checkbox" ? "menuitemcheckbox" : "menuitemradio";
     },
     get ["aria-label"]() {
       return props.ariaLabel;
@@ -290,8 +313,9 @@ function DropdownChoiceRow(props) {
       }
       event.preventDefault();
       event.stopPropagation();
+      const action = props.action;
       if (props.closeOnSelect !== false) menu?.close();
-      props.action();
+      action();
     },
     onKeyDown: event => {
       // A link answers only Enter; as a menu choice it also answers Space, like the button form.
@@ -305,13 +329,13 @@ function DropdownChoiceRow(props) {
           return props.choice === "checkbox";
         },
         get children() {
-          var _el$14 = _$getNextElement(_tmpl$9);
+          var _el$14 = _$getNextElement(_tmpl$0);
           _$insert(_el$14, _$createComponent(Show, {
             get when() {
               return checked();
             },
             get children() {
-              return _$getNextElement(_tmpl$8);
+              return _$getNextElement(_tmpl$9);
             }
           }));
           return _el$14;
@@ -342,7 +366,7 @@ function DropdownChoiceRow(props) {
           return props.color;
         },
         children: color => (() => {
-          var _el$23 = _$getNextElement(_tmpl$1);
+          var _el$23 = _$getNextElement(_tmpl$10);
           _$effect(_$p => _$setStyleProperty(_el$23, "--k2b-dropdown-color", color()));
           return _el$23;
         })()
@@ -368,7 +392,7 @@ function DropdownChoiceRow(props) {
           return props.choice === "radio";
         },
         get children() {
-          var _el$20 = _$getNextElement(_tmpl$0);
+          var _el$20 = _$getNextElement(_tmpl$1);
           _$effect(() => _$setAttribute(_el$20, "data-hidden", checked() ? undefined : "true"));
           return _el$20;
         }
@@ -428,7 +452,8 @@ export function DropdownItems(props) {
   return _$createComponent(MenuContext.Provider, {
     get value() {
       return {
-        close: props.close
+        close: props.close,
+        role: props.role ?? "menuitem"
       };
     },
     get children() {
@@ -447,7 +472,7 @@ export function DropdownItems(props) {
               return renderItem(current);
             },
             get children() {
-              var _el$25 = _$getNextElement(_tmpl$11),
+              var _el$25 = _$getNextElement(_tmpl$12),
                 _el$27 = _el$25.firstChild,
                 [_el$28, _co$5] = _$getNextMarker(_el$27.nextSibling),
                 _el$29 = _el$28.nextSibling,
@@ -458,17 +483,17 @@ export function DropdownItems(props) {
                 },
                 children: label => _$createComponent(Show, {
                   get when() {
-                    return current().labelAction;
+                    return _$memo(() => props.role !== "option")() && current().labelAction;
                   },
                   get fallback() {
                     return (() => {
-                      var _el$31 = _$getNextElement(_tmpl$12);
+                      var _el$31 = _$getNextElement(_tmpl$13);
                       _$insert(_el$31, label);
                       return _el$31;
                     })();
                   },
                   children: action => (() => {
-                    var _el$32 = _$getNextElement(_tmpl$13),
+                    var _el$32 = _$getNextElement(_tmpl$14),
                       _el$33 = _el$32.firstChild,
                       _el$34 = _el$33.nextSibling,
                       [_el$35, _co$7] = _$getNextMarker(_el$34.nextSibling);
@@ -494,7 +519,7 @@ export function DropdownItems(props) {
                   });
                 },
                 get children() {
-                  var _el$26 = _$getNextElement(_tmpl$10);
+                  var _el$26 = _$getNextElement(_tmpl$11);
                   _$insert(_el$26, _$createComponent(KeyedFor, {
                     get each() {
                       return current().items;
@@ -506,10 +531,10 @@ export function DropdownItems(props) {
                 }
               }), _el$30, _co$6);
               _$effect(_p$ => {
-                var _v$12 = index() > 0 ? "true" : undefined,
-                  _v$13 = current().sectionLabel ?? (current().layout === "row" ? undefined : messages().actions);
-                _v$12 !== _p$.e && _$setAttribute(_el$25, "data-divided", _p$.e = _v$12);
-                _v$13 !== _p$.t && _$setAttribute(_el$25, "aria-label", _p$.t = _v$13);
+                var _v$16 = index() > 0 ? "true" : undefined,
+                  _v$17 = current().sectionLabel ?? (current().layout === "row" ? undefined : messages().actions);
+                _v$16 !== _p$.e && _$setAttribute(_el$25, "data-divided", _p$.e = _v$16);
+                _v$17 !== _p$.t && _$setAttribute(_el$25, "aria-label", _p$.t = _v$17);
                 return _p$;
               }, {
                 e: undefined,
@@ -549,7 +574,9 @@ function DropdownTrigger(props) {
       get ["aria-expanded"]() {
         return context.open();
       },
-      "aria-haspopup": "menu",
+      get ["aria-haspopup"]() {
+        return context.popup();
+      },
       get ["aria-label"]() {
         return local.label;
       },
@@ -593,7 +620,7 @@ function DropdownTrigger(props) {
     }));
   }
   return [(() => {
-    var _el$36 = _$getNextElement(_tmpl$14);
+    var _el$36 = _$getNextElement(_tmpl$15);
     _$use(register, _el$36);
     _$spread(_el$36, _$mergeProps(rest, {
       get ["aria-controls"]() {
@@ -602,7 +629,9 @@ function DropdownTrigger(props) {
       get ["aria-expanded"]() {
         return context.open();
       },
-      "aria-haspopup": "menu",
+      get ["aria-haspopup"]() {
+        return context.popup();
+      },
       get ["aria-label"]() {
         return local.label;
       },
@@ -664,6 +693,8 @@ function DropdownRoot(props) {
   const [internalOpen, setInternalOpen] = createSignal(false);
   const [entriesShown, setEntriesShown] = createSignal(!props.lazy);
   let triggerRef;
+  const [query, setQuery] = createSignal("");
+  let searchApi;
   /** Set while the menu is open from `openAt`: it appears beside `anchor`, and focus returns to `origin`. */
   let anchor;
   let origin;
@@ -712,6 +743,7 @@ function DropdownRoot(props) {
     // Before hiding, so the popover does not return focus on its own.
     if (restoreFocus) returnFocus(originElement() ?? triggerRef, triggerRing);
     if (menuRef?.matches(":popover-open")) menuRef.hidePopover();
+    setQuery("");
     // Like `open`, expose the closed state now: the toggle event can arrive after the next key press, and a trigger
     // that still reads as open would ignore Enter (Escape, then Enter at once, must reopen).
     setInternalOpen(false);
@@ -728,7 +760,8 @@ function DropdownRoot(props) {
     attachViewportListeners();
     place();
     queueMicrotask(() => {
-      if (focus) focusMenuItem(menuRef, focus === "first" ? 0 : -1);
+      if (!focus) return;
+      if (searchApi) searchApi.focus(focus);else focusMenuItem(menuRef, focus === "first" ? 0 : -1);
     });
   };
   const requestOpen = (next, focus = "first") => {
@@ -755,6 +788,9 @@ function DropdownRoot(props) {
         label: props.label ?? messages().dropdownMenu,
         locale: locale(),
         top: props.sheetTop,
+        search: props.search,
+        icons: props.icons,
+        note: props.note,
         signal: current.signal
       }).finally(() => {
         sheet = undefined;
@@ -772,7 +808,8 @@ function DropdownRoot(props) {
   };
   const handleMenuKeyDown = event => {
     const items = actionableItems(menuRef);
-    if (focusMenuRow(items, event.key) || focusRowSegment(items, event.key)) {
+    // A searchable menu's field keeps the focus and moves the marked entry itself.
+    if (!props.search && (focusMenuRow(items, event.key) || focusRowSegment(items, event.key))) {
       event.preventDefault();
     } else if (event.key === "Escape") {
       event.preventDefault();
@@ -782,6 +819,25 @@ function DropdownRoot(props) {
       requestOpen(false);
     }
   };
+  const triggerKey = event => {
+    if (!["Enter", " ", "ArrowDown", "ArrowUp"].includes(event.key)) return;
+    // Ctrl+Enter and the like keep their browser meaning on an adopted link, such as opening it in a new tab.
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (isOpen()) {
+      if (searchApi) searchApi.focus(event.key === "ArrowUp" ? "last" : "first");else focusMenuItem(menuRef, event.key === "ArrowUp" ? -1 : 0);
+      return;
+    }
+    anchor = origin = undefined;
+    keyFocus = event.key === "ArrowUp" ? "last" : "first";
+    requestOpen(true, keyFocus);
+    keyFocus = false;
+  };
+  const toggle = () => {
+    if (!isOpen()) anchor = origin = undefined;
+    requestOpen(!isOpen());
+  };
   const context = {
     disabled: () => Boolean(props.disabled),
     menuId,
@@ -789,23 +845,9 @@ function DropdownRoot(props) {
     registerTrigger: element => {
       triggerRef = element;
     },
-    toggle: () => {
-      if (!isOpen()) anchor = origin = undefined;
-      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;
-      }
-      anchor = origin = undefined;
-      keyFocus = event.key === "ArrowUp" ? "last" : "first";
-      requestOpen(true, keyFocus);
-      keyFocus = false;
-    }
+    toggle,
+    popup: () => props.search ? "dialog" : "menu",
+    triggerKeyDown: event => triggerKey(event)
   };
   createEffect(() => {
     const controlled = props.open;
@@ -832,16 +874,33 @@ function DropdownRoot(props) {
     mounted = true;
     if (props.open) open(false);
     onCleanup(detachViewportListeners);
+    const adopted = props.attach?.();
+    if (!adopted) return;
+    triggerRef = adopted;
+    adopted.setAttribute("aria-controls", menuId);
+    const onClick = event => {
+      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      event.preventDefault();
+      event.stopPropagation();
+      toggle();
+    };
+    adopted.addEventListener("click", onClick);
+    adopted.addEventListener("keydown", triggerKey);
+    createEffect(() => adopted.setAttribute("aria-expanded", String(isOpen())));
+    onCleanup(() => {
+      adopted.removeEventListener("click", onClick);
+      adopted.removeEventListener("keydown", triggerKey);
+    });
   });
   onCleanup(() => sheet?.abort());
   return _$createComponent(DropdownContext.Provider, {
     value: context,
     get children() {
-      var _el$37 = _$getNextElement(_tmpl$15),
-        _el$39 = _el$37.firstChild,
-        [_el$40, _co$8] = _$getNextMarker(_el$39.nextSibling),
-        _el$38 = _el$40.nextSibling;
-      _$insert(_el$37, () => props.children, _el$40, _co$8);
+      var _el$37 = _$getNextElement(_tmpl$17),
+        _el$40 = _el$37.firstChild,
+        [_el$41, _co$8] = _$getNextMarker(_el$40.nextSibling),
+        _el$38 = _el$41.nextSibling;
+      _$insert(_el$37, () => props.children, _el$41, _co$8);
       _el$38.addEventListener("toggle", event => {
         const nextOpen = event.newState === "open";
         const wasOpen = event.oldState === "open";
@@ -853,6 +912,7 @@ function DropdownRoot(props) {
         const focused = document.activeElement;
         const target = wasOpen && !nextOpen ? originElement() : undefined;
         if (target?.isConnected && (!focused || focused === document.body || menuRef?.contains(focused))) returnFocus(target, triggerRing);
+        if (wasOpen && !nextOpen) setQuery("");
         if (wasOpen && !nextOpen) props.onClose?.();
         if (!nextOpen && props.open === true) queueMicrotask(() => props.open === true && open(false));
       });
@@ -865,31 +925,77 @@ function DropdownRoot(props) {
           return entriesShown();
         },
         get children() {
-          return _$createComponent(DropdownItems, {
-            get items() {
-              return props.items;
+          return [_$createComponent(Show, {
+            get when() {
+              return props.search;
             },
-            close: close
-          });
+            get fallback() {
+              return _$createComponent(DropdownItems, {
+                get items() {
+                  return props.items;
+                },
+                close: close
+              });
+            },
+            children: search => _$createComponent(MenuSearch, {
+              Items: DropdownItems,
+              get items() {
+                return props.items;
+              },
+              get search() {
+                return search();
+              },
+              get label() {
+                return props.label ?? messages().dropdownMenu;
+              },
+              query: query,
+              setQuery: setQuery,
+              close: close,
+              api: api => {
+                searchApi = api;
+                onCleanup(() => {
+                  if (searchApi === api) searchApi = undefined;
+                });
+              }
+            })
+          }), _$createComponent(Show, {
+            get when() {
+              return props.note;
+            },
+            get children() {
+              var _el$39 = _$getNextElement(_tmpl$16);
+              _$setAttribute(_el$39, "id", `${menuId}-note`);
+              _$insert(_el$39, () => props.note);
+              return _el$39;
+            }
+          })];
         }
       }));
       _$effect(_p$ => {
-        var _v$14 = `k2b-dropdown ${props.class ?? ""}`,
-          _v$15 = props.label ?? messages().dropdownMenu,
-          _v$16 = `k2b-dropdown__menu ${props.menuClass ?? ""}`,
-          _v$17 = props.width ? {
+        var _v$18 = `k2b-dropdown ${props.class ?? ""}`,
+          _v$19 = props.search ? "dialog" : "menu",
+          _v$20 = props.label ?? messages().dropdownMenu,
+          _v$21 = props.note ? `${menuId}-note` : undefined,
+          _v$22 = `k2b-dropdown__menu ${props.menuClass ?? ""}`,
+          _v$23 = props.width ? {
             "--k2b-dropdown-width": props.width
           } : undefined,
-          _v$18 = props.width ? "fixed" : undefined,
-          _v$19 = props.variant ?? "default",
-          _v$20 = position();
-        _v$14 !== _p$.e && _$className(_el$37, _p$.e = _v$14);
-        _v$15 !== _p$.t && _$setAttribute(_el$38, "aria-label", _p$.t = _v$15);
-        _v$16 !== _p$.a && _$className(_el$38, _p$.a = _v$16);
-        _p$.o = _$style(_el$38, _v$17, _p$.o);
-        _v$18 !== _p$.i && _$setAttribute(_el$38, "data-width", _p$.i = _v$18);
-        _v$19 !== _p$.n && _$setAttribute(_el$38, "data-variant", _p$.n = _v$19);
-        _v$20 !== _p$.s && _$setAttribute(_el$38, "data-position", _p$.s = _v$20);
+          _v$24 = props.width ? "fixed" : undefined,
+          _v$25 = props.variant ?? "default",
+          _v$26 = props.icons === "tile" ? "tile" : undefined,
+          _v$27 = props.search ? "" : undefined,
+          _v$28 = position();
+        _v$18 !== _p$.e && _$className(_el$37, _p$.e = _v$18);
+        _v$19 !== _p$.t && _$setAttribute(_el$38, "role", _p$.t = _v$19);
+        _v$20 !== _p$.a && _$setAttribute(_el$38, "aria-label", _p$.a = _v$20);
+        _v$21 !== _p$.o && _$setAttribute(_el$38, "aria-describedby", _p$.o = _v$21);
+        _v$22 !== _p$.i && _$className(_el$38, _p$.i = _v$22);
+        _p$.n = _$style(_el$38, _v$23, _p$.n);
+        _v$24 !== _p$.s && _$setAttribute(_el$38, "data-width", _p$.s = _v$24);
+        _v$25 !== _p$.h && _$setAttribute(_el$38, "data-variant", _p$.h = _v$25);
+        _v$26 !== _p$.r && _$setAttribute(_el$38, "data-icons", _p$.r = _v$26);
+        _v$27 !== _p$.d && _$setAttribute(_el$38, "data-search", _p$.d = _v$27);
+        _v$28 !== _p$.l && _$setAttribute(_el$38, "data-position", _p$.l = _v$28);
         return _p$;
       }, {
         e: undefined,
@@ -898,7 +1004,11 @@ function DropdownRoot(props) {
         o: undefined,
         i: undefined,
         n: undefined,
-        s: undefined
+        s: undefined,
+        h: undefined,
+        r: undefined,
+        d: undefined,
+        l: undefined
       });
       _$runHydrationEvents();
       return _el$37;