@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/components/navigation/breadcrumbs/breadcrumbs.js

@@ -1,4 +1,4 @@
-import { use as $, spread as C, mergeProps as v, insert as o, createComponent as p, template as s, effect as w, setAttribute as A, delegateEvents as B } from "solid-js/web";
+import { use as $, spread as C, mergeProps as v, insert as n, createComponent as d, template as s, effect as w, setAttribute as A, delegateEvents as B } from "solid-js/web";
 import '../../../assets/styles/less/components/breadcrumbs/breadcrumbs.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                 */
 import { mergeProps as E, splitProps as P, children as y, For as I, Show as L } from "solid-js";
@@ -7,17 +7,17 @@ import { createControllableState as k } from "../../../primitives/createControll
 import { mergeRefs as F } from "../../../primitives/mergeRefs.js";
 var R = /* @__PURE__ */ s("<button type=button class=smwb-breadcrumbs__expand>…"), V = /* @__PURE__ */ s("<nav><ol class=smwb-breadcrumbs__list>"), j = /* @__PURE__ */ s("<li class=smwb-breadcrumbs__item>"), q = /* @__PURE__ */ s("<li class=smwb-breadcrumbs__separator aria-hidden=true>");
 function N(c) {
-  const d = E({
+  const i = E({
     separator: "/",
     maxItems: 8,
     itemsBeforeCollapse: 1,
     itemsAfterCollapse: 1,
     expandLabel: "Show path"
-  }, c), [e, i] = P(d, ["class", "separator", "maxItems", "itemsBeforeCollapse", "itemsAfterCollapse", "expanded", "onExpand", "expandLabel", "children", "ref"]), [u, b] = k({
+  }, c), [e, o] = P(i, ["class", "separator", "maxItems", "itemsBeforeCollapse", "itemsAfterCollapse", "expanded", "onExpand", "expandLabel", "children", "ref", "data-testid"]), [u, b] = k({
     value: () => e.expanded,
     defaultValue: !1,
     onChange: () => e.onExpand?.()
-  }), f = y(() => e.children), l = () => f.toArray(), h = () => !u() && l().length > e.maxItems && e.itemsBeforeCollapse + e.itemsAfterCollapse < l().length, _ = () => b(!0), n = () => {
+  }), f = y(() => e.children), l = () => f.toArray(), h = () => !u() && l().length > e.maxItems && e.itemsBeforeCollapse + e.itemsAfterCollapse < l().length, _ = () => b(!0), m = () => {
     const r = l();
     return h() ? [...r.slice(0, e.itemsBeforeCollapse), (() => {
       var t = R();
@@ -25,27 +25,31 @@ function N(c) {
     })(), ...r.slice(r.length - e.itemsAfterCollapse)] : r;
   };
   return (() => {
-    var r = V(), t = r.firstChild, m = F(e.ref);
-    return typeof m == "function" && $(m, r), C(r, v(i, {
-      "data-testid": "breadcrumbs",
-      "aria-label": "breadcrumb",
+    var r = V(), t = r.firstChild, p = F(e.ref);
+    return typeof p == "function" && $(p, r), C(r, v(o, {
+      get "data-testid"() {
+        return e["data-testid"] ?? "breadcrumbs";
+      },
+      get "aria-label"() {
+        return o["aria-label"] ?? "breadcrumb";
+      },
       get class() {
         return S("smwb-breadcrumbs", e.class);
       }
-    }), !1, !0), o(t, p(I, {
+    }), !1, !0), n(t, d(I, {
       get each() {
-        return n();
+        return m();
       },
       children: (g, x) => [(() => {
         var a = j();
-        return o(a, g), a;
-      })(), p(L, {
+        return n(a, g), a;
+      })(), d(L, {
         get when() {
-          return x() < n().length - 1;
+          return x() < m().length - 1;
         },
         get children() {
           var a = q();
-          return o(a, () => e.separator), a;
+          return n(a, () => e.separator), a;
         }
       })]
     })), r;

package/dist/components/navigation/breadcrumbs/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, Show, children as resolveChildren, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface BreadcrumbsProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Node placed between every crumb. */\n  separator?: JSX.Element;\n  /** Collapse the middle of the trail when there are more than `maxItems` crumbs. */\n  maxItems?: number;\n  /** How many leading crumbs to keep when collapsed. */\n  itemsBeforeCollapse?: number;\n  /** How many trailing crumbs to keep when collapsed. */\n  itemsAfterCollapse?: number;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Fired when the user activates the expand control. */\n  onExpand?: () => void;\n  /** Accessible label for the expand button. */\n  expandLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Breadcrumbs(props: ParentProps<BreadcrumbsProps>): JSX.Element {\n  const merged = mergeProps(\n    { separator: \"/\" as JSX.Element, maxItems: 8, itemsBeforeCollapse: 1, itemsAfterCollapse: 1, expandLabel: \"Show path\" },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"separator\",\n    \"maxItems\",\n    \"itemsBeforeCollapse\",\n    \"itemsAfterCollapse\",\n    \"expanded\",\n    \"onExpand\",\n    \"expandLabel\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [expanded, setExpanded] = createControllableState<boolean>({\n    value: () => local.expanded,\n    defaultValue: false,\n    onChange: () => local.onExpand?.(),\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const crumbs = (): unknown[] => resolved.toArray();\n\n  const collapsed = (): boolean =>\n    !expanded() &&\n    crumbs().length > local.maxItems &&\n    local.itemsBeforeCollapse + local.itemsAfterCollapse < crumbs().length;\n\n  const handleExpand = (): void => setExpanded(true);\n\n  const rendered = (): unknown[] => {\n    const all = crumbs();\n    if (!collapsed()) return all;\n    return [\n      ...all.slice(0, local.itemsBeforeCollapse),\n      (\n        <button type=\"button\" class=\"smwb-breadcrumbs__expand\" aria-label={local.expandLabel} onClick={handleExpand}>\n          …\n        </button>\n      ),\n      ...all.slice(all.length - local.itemsAfterCollapse),\n    ];\n  };\n\n  return (\n    <nav {...rest} ref={mergeRefs(local.ref)} data-testid=\"breadcrumbs\" aria-label=\"breadcrumb\" class={cn(\"smwb-breadcrumbs\", local.class)}>\n      <ol class=\"smwb-breadcrumbs__list\">\n        <For each={rendered()}>\n          {(crumb, index) => (\n            <>\n              <li class=\"smwb-breadcrumbs__item\">{crumb as JSX.Element}</li>\n              <Show when={index() < rendered().length - 1}>\n                <li class=\"smwb-breadcrumbs__separator\" aria-hidden=\"true\">\n                  {local.separator}\n                </li>\n              </Show>\n            </>\n          )}\n        </For>\n      </ol>\n    </nav>\n  );\n}\n\nexport default Breadcrumbs;\n"],"names":["Breadcrumbs","props","merged","mergeProps","separator","maxItems","itemsBeforeCollapse","itemsAfterCollapse","expandLabel","local","rest","splitProps","expanded","setExpanded","createControllableState","value","defaultValue","onChange","onExpand","resolved","resolveChildren","children","crumbs","toArray","collapsed","length","handleExpand","rendered","all","slice","_el$","_tmpl$","$$click","_$effect","_$setAttribute","_el$2","_tmpl$2","_el$3","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","crumb","index","_el$4","_tmpl$3","Show","when","_el$5","_tmpl$4","_$delegateEvents"],"mappings":";;;;;;;;AAyBO,SAASA,EAAYC,GAAmD;AAC7E,QAAMC,IAASC,EACb;AAAA,IAAEC,WAAW;AAAA,IAAoBC,UAAU;AAAA,IAAGC,qBAAqB;AAAA,IAAGC,oBAAoB;AAAA,IAAGC,aAAa;AAAA,EAAA,GAC1GP,CACF,GACM,CAACQ,GAAOC,CAAI,IAAIC,EAAWT,GAAQ,CACvC,SACA,aACA,YACA,uBACA,sBACA,YACA,YACA,eACA,YACA,KAAK,CACN,GAEK,CAACU,GAAUC,CAAW,IAAIC,EAAiC;AAAA,IAC/DC,OAAOA,MAAMN,EAAMG;AAAAA,IACnBI,cAAc;AAAA,IACdC,UAAUA,MAAMR,EAAMS,WAAAA;AAAAA,EAAW,CAClC,GAEKC,IAAWC,EAAgB,MAAMX,EAAMY,QAAQ,GAC/CC,IAASA,MAAiBH,EAASI,QAAAA,GAEnCC,IAAYA,MAChB,CAACZ,EAAAA,KACDU,EAAAA,EAASG,SAAShB,EAAMJ,YACxBI,EAAMH,sBAAsBG,EAAMF,qBAAqBe,IAASG,QAE5DC,IAAeA,MAAYb,EAAY,EAAI,GAE3Cc,IAAWA,MAAiB;AAChC,UAAMC,IAAMN,EAAAA;AACZ,WAAKE,EAAAA,IACE,CACL,GAAGI,EAAIC,MAAM,GAAGpB,EAAMH,mBAAmB,IAAC,MAAA;AAAA,UAAAwB,IAAAC,EAAAA;AAAAD,aAAAA,EAAAE,UAEuDN,GAAYO,QAAAC,EAAAJ,GAAA,cAAxCrB,EAAMD,WAAW,CAAA,GAAAsB;AAAAA,IAAA,GAAA,GAItF,GAAGF,EAAIC,MAAMD,EAAIH,SAAShB,EAAMF,kBAAkB,CAAC,IAR5BqB;AAAAA,EAU3B;AAEA,UAAA,MAAA;AAAA,QAAAO,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IACsBC,EAAU/B,EAAMgC,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAAS,EAA/BlC,GAAI;AAAA,MAAA,eAAyC;AAAA,MAAa,cAAY;AAAA,MAAY,IAAA,QAAA;AAAA,eAAQmC,EAAG,oBAAoBpC,EAAMqC,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAV,GAAAW,EAEjIC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,EAAAA;AAAAA,MAAU;AAAA,MAAAN,UAClBA,CAAC8B,GAAOC,MAAK,EAAA,MAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAE0BF,CAAoB,GAAAE;AAAAA,MAAA,GAAA,GAAAL,EACvDO,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEJ,EAAAA,IAAUzB,EAAAA,EAAWF,SAAS;AAAA,QAAC;AAAA,QAAA,IAAAJ,WAAA;AAAA,cAAAoC,IAAAC,EAAAA;AAAAX,iBAAAA,EAAAU,GAAA,MAEtChD,EAAML,SAAS,GAAAqD;AAAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA,CAIvB,CAAA,GAAAtB;AAAAA,EAAA,GAAA;AAKX;AAE2BwB,EAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"breadcrumbs.js","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { type JSX, type ParentProps, For, Show, children as resolveChildren, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface BreadcrumbsProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Node placed between every crumb. */\n  separator?: JSX.Element;\n  /** Collapse the middle of the trail when there are more than `maxItems` crumbs. */\n  maxItems?: number;\n  /** How many leading crumbs to keep when collapsed. */\n  itemsBeforeCollapse?: number;\n  /** How many trailing crumbs to keep when collapsed. */\n  itemsAfterCollapse?: number;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Fired when the user activates the expand control. */\n  onExpand?: () => void;\n  /** Accessible label for the expand button. */\n  expandLabel?: string;\n  /** Test id of the root `<nav>`; `breadcrumbs` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Breadcrumbs(props: ParentProps<BreadcrumbsProps>): JSX.Element {\n  const merged = mergeProps(\n    { separator: \"/\" as JSX.Element, maxItems: 8, itemsBeforeCollapse: 1, itemsAfterCollapse: 1, expandLabel: \"Show path\" },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"separator\",\n    \"maxItems\",\n    \"itemsBeforeCollapse\",\n    \"itemsAfterCollapse\",\n    \"expanded\",\n    \"onExpand\",\n    \"expandLabel\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [expanded, setExpanded] = createControllableState<boolean>({\n    value: () => local.expanded,\n    defaultValue: false,\n    onChange: () => local.onExpand?.(),\n  });\n\n  const resolved = resolveChildren(() => local.children);\n  const crumbs = (): unknown[] => resolved.toArray();\n\n  const collapsed = (): boolean =>\n    !expanded() &&\n    crumbs().length > local.maxItems &&\n    local.itemsBeforeCollapse + local.itemsAfterCollapse < crumbs().length;\n\n  const handleExpand = (): void => setExpanded(true);\n\n  const rendered = (): unknown[] => {\n    const all = crumbs();\n    if (!collapsed()) return all;\n    return [\n      ...all.slice(0, local.itemsBeforeCollapse),\n      (\n        <button type=\"button\" class=\"smwb-breadcrumbs__expand\" aria-label={local.expandLabel} onClick={handleExpand}>\n          …\n        </button>\n      ),\n      ...all.slice(all.length - local.itemsAfterCollapse),\n    ];\n  };\n\n  return (\n    <nav\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"breadcrumbs\"}\n      // A default the caller's own replaces, to name it in their language; an\n      // explicit undefined keeps it.\n      aria-label={rest[\"aria-label\"] ?? \"breadcrumb\"}\n      class={cn(\"smwb-breadcrumbs\", local.class)}\n    >\n      <ol class=\"smwb-breadcrumbs__list\">\n        <For each={rendered()}>\n          {(crumb, index) => (\n            <>\n              <li class=\"smwb-breadcrumbs__item\">{crumb as JSX.Element}</li>\n              <Show when={index() < rendered().length - 1}>\n                <li class=\"smwb-breadcrumbs__separator\" aria-hidden=\"true\">\n                  {local.separator}\n                </li>\n              </Show>\n            </>\n          )}\n        </For>\n      </ol>\n    </nav>\n  );\n}\n\nexport default Breadcrumbs;\n"],"names":["Breadcrumbs","props","merged","mergeProps","separator","maxItems","itemsBeforeCollapse","itemsAfterCollapse","expandLabel","local","rest","splitProps","expanded","setExpanded","createControllableState","value","defaultValue","onChange","onExpand","resolved","resolveChildren","children","crumbs","toArray","collapsed","length","handleExpand","rendered","all","slice","_el$","_tmpl$","$$click","_$effect","_$setAttribute","_el$2","_tmpl$2","_el$3","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","crumb","index","_el$4","_tmpl$3","Show","when","_el$5","_tmpl$4","_$delegateEvents"],"mappings":";;;;;;;;AA2BO,SAASA,EAAYC,GAAmD;AAC7E,QAAMC,IAASC,EACb;AAAA,IAAEC,WAAW;AAAA,IAAoBC,UAAU;AAAA,IAAGC,qBAAqB;AAAA,IAAGC,oBAAoB;AAAA,IAAGC,aAAa;AAAA,EAAA,GAC1GP,CACF,GACM,CAACQ,GAAOC,CAAI,IAAIC,EAAWT,GAAQ,CACvC,SACA,aACA,YACA,uBACA,sBACA,YACA,YACA,eACA,YACA,OACA,aAAa,CACd,GAEK,CAACU,GAAUC,CAAW,IAAIC,EAAiC;AAAA,IAC/DC,OAAOA,MAAMN,EAAMG;AAAAA,IACnBI,cAAc;AAAA,IACdC,UAAUA,MAAMR,EAAMS,WAAAA;AAAAA,EAAW,CAClC,GAEKC,IAAWC,EAAgB,MAAMX,EAAMY,QAAQ,GAC/CC,IAASA,MAAiBH,EAASI,QAAAA,GAEnCC,IAAYA,MAChB,CAACZ,EAAAA,KACDU,EAAAA,EAASG,SAAShB,EAAMJ,YACxBI,EAAMH,sBAAsBG,EAAMF,qBAAqBe,IAASG,QAE5DC,IAAeA,MAAYb,EAAY,EAAI,GAE3Cc,IAAWA,MAAiB;AAChC,UAAMC,IAAMN,EAAAA;AACZ,WAAKE,EAAAA,IACE,CACL,GAAGI,EAAIC,MAAM,GAAGpB,EAAMH,mBAAmB,IAAC,MAAA;AAAA,UAAAwB,IAAAC,EAAAA;AAAAD,aAAAA,EAAAE,UAEuDN,GAAYO,QAAAC,EAAAJ,GAAA,cAAxCrB,EAAMD,WAAW,CAAA,GAAAsB;AAAAA,IAAA,GAAA,GAItF,GAAGF,EAAIC,MAAMD,EAAIH,SAAShB,EAAMF,kBAAkB,CAAC,IAR5BqB;AAAAA,EAU3B;AAEA,UAAA,MAAA;AAAA,QAAAO,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAGSC,EAAU/B,EAAMgC,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAAS,EADrBlC,GAAI;AAAA,MAAA,IAAA,gBAAA;AAAA,eAEKD,EAAM,aAAa,KAAK;AAAA,MAAa;AAAA,MAAA,IAAA,eAAA;AAAA,eAGtCC,EAAK,YAAY,KAAK;AAAA,MAAY;AAAA,MAAA,IAAA,QAAA;AAAA,eACvCmC,EAAG,oBAAoBpC,EAAMqC,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAV,GAAAW,EAGvCC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,EAAAA;AAAAA,MAAU;AAAA,MAAAN,UAClBA,CAAC8B,GAAOC,MAAK,EAAA,MAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAE0BF,CAAoB,GAAAE;AAAAA,MAAA,GAAA,GAAAL,EACvDO,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEJ,EAAAA,IAAUzB,EAAAA,EAAWF,SAAS;AAAA,QAAC;AAAA,QAAA,IAAAJ,WAAA;AAAA,cAAAoC,IAAAC,EAAAA;AAAAX,iBAAAA,EAAAU,GAAA,MAEtChD,EAAML,SAAS,GAAAqD;AAAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA,CAIvB,CAAA,GAAAtB;AAAAA,EAAA,GAAA;AAKX;AAE2BwB,EAAA,CAAA,OAAA,CAAA;"}

package/dist/components/navigation/commandPalette/commandPalette.d.ts

@@ -0,0 +1,126 @@
+import { type JSX } from "solid-js";
+import type { Ref } from "../../../primitives/mergeRefs";
+import type { CommandPaletteFilter, CommandPaletteGroup, CommandPaletteItem, CommandPaletteSource } from "./commandPaletteTypes";
+export interface CommandPaletteProps {
+    /**
+     * Whether the palette is open. Any value but `undefined` makes it controlled: the palette then
+     * shows this and only asks to change it through `onOpenChange`. While it is `undefined`, the
+     * palette keeps its own state, starting from `defaultOpen`.
+     */
+    open?: boolean | undefined;
+    /** Open state to start from while uncontrolled; `false` by default. */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Called for every request to open or close: Escape, a backdrop click, and choosing an item while
+     * `closeOnSelect`. Called in both the controlled and the uncontrolled mode.
+     */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** The groups to search in, filtered locally by `filter`; empty by default. */
+    groups?: CommandPaletteGroup[] | undefined;
+    /**
+     * Recently used items, kept by the app (its local storage, its server, per user) and updated from
+     * `onSelect`. Shown as the first group while the query is empty, unfiltered, and hidden while
+     * the user searches.
+     */
+    recent?: CommandPaletteItem[] | undefined;
+    /** Heading of the recent group; `"Recent"` by default. */
+    recentLabel?: string | undefined;
+    /**
+     * The text in the search field. Any value but `undefined` makes it controlled: the field shows
+     * this and only reports edits through `onQueryChange`.
+     */
+    query?: string | undefined;
+    /** Text to start from while uncontrolled, and to reset to each time the palette opens; `""`. */
+    defaultQuery?: string | undefined;
+    /** Called for every edit of the field, in both the controlled and the uncontrolled mode. */
+    onQueryChange?: ((query: string) => void) | undefined;
+    /**
+     * Decides which of `groups` an edit keeps; {@link commandPaletteFilter} by default. `false` shows
+     * `groups` as given, for an app that filters them itself or gets them filtered from a server.
+     * Never applied to `recent` or to the results of `source`.
+     */
+    filter?: CommandPaletteFilter | false | undefined;
+    /**
+     * Loads results for the trimmed query, after `debounce` ms of quiet typing. Its `signal` is
+     * aborted when a newer query, a close or an unmount makes the answer useless, and an answer that
+     * arrives for an older query is dropped. Appended after `groups`.
+     */
+    source?: CommandPaletteSource | undefined;
+    /** Milliseconds of quiet typing before `source` is called; `200` by default. */
+    debounce?: number | undefined;
+    /**
+     * `source` is called only when the trimmed query has at least this many characters; `1` by
+     * default. `0` also loads for the empty query.
+     */
+    minQueryLength?: number | undefined;
+    /**
+     * App-driven loading: shows the skeleton like a pending `source` does, for an app that loads
+     * itself with a controlled `query`; `false` by default.
+     */
+    loading?: boolean | undefined;
+    /**
+     * Called for every chosen item, after the item's own `onSelect`. The place for the app to move the
+     * item to the top of its `recent` list.
+     */
+    onSelect?: ((item: CommandPaletteItem, group: CommandPaletteGroup) => void) | undefined;
+    /** Ask to close when an item is chosen; `true` by default. */
+    closeOnSelect?: boolean | undefined;
+    /** Placeholder of the field; `"Type a command or search…"` by default. It is not its name. */
+    placeholder?: string | undefined;
+    /** Accessible name of the field and, through `aria-labelledby`, of the listbox; `"Search commands"`. */
+    searchLabel?: string | undefined;
+    /** Shown and announced when nothing matches; `"No results"` by default. */
+    noResultsText?: string | undefined;
+    /** Shown and announced when `source` rejects; `"Couldn't load results"` by default. */
+    errorText?: string | undefined;
+    /**
+     * Text of the polite announcement after a search settles; `"1 result"` or `"N results"` by
+     * default. Not used for zero results, which announce `noResultsText`.
+     */
+    resultsAnnouncement?: ((count: number) => string) | undefined;
+    /**
+     * Slot under the results, for key hints built with `Kbd`. Drawn only when given:
+     * `<>Press <Kbd keys={["Enter"]} /> to run</>`.
+     */
+    footer?: JSX.Element | undefined;
+    /** Added to the dialog element, after `smwb-command-palette`. */
+    class?: string | undefined;
+    /** Name of the dialog; `"Command palette"` by default. Not set when `aria-labelledby` is given. */
+    "aria-label"?: string | undefined;
+    /** Id of the element that names the dialog; replaces the default `aria-label`. */
+    "aria-labelledby"?: string | undefined;
+    /** Ids of the elements that describe the dialog. */
+    "aria-describedby"?: string | undefined;
+    /** Test id of the dialog element; `"command-palette"` unless given. */
+    "data-testid"?: string | undefined;
+    /** Ref of the dialog element. */
+    ref?: Ref<HTMLDivElement> | undefined;
+}
+/**
+ * Search and actions on ⌘K: a modal dialog with one search field and grouped results, for reaching
+ * pages and running commands from the keyboard alone. Built on {@link Modal}, so it portals into the
+ * body, traps the focus, closes on Escape only when it is the topmost overlay, and renders nothing on
+ * the server.
+ *
+ * Results come from three places, drawn in this order: `recent` while the query is empty, `groups`
+ * filtered locally by `filter`, and the answer of `source` for the current query. ArrowUp, ArrowDown,
+ * PageUp and PageDown move the active option, Enter runs it, and Escape closes the palette. The first
+ * enabled option is active as soon as the palette opens, so Enter runs the top hit.
+ *
+ * The palette does not bind Mod+K itself: the app does, with {@link createKeyboardShortcut}, so one
+ * binding serves any opener and the same key list draws the hint.
+ *
+ * ```tsx
+ * const [open, setOpen] = createSignal(false);
+ * createKeyboardShortcut({ keys: ["Mod", "K"], onTrigger: () => setOpen(!open()) });
+ * <Button onClick={() => setOpen(true)}>
+ *   Search <Kbd keys={["Mod", "K"]} />
+ * </Button>
+ * <CommandPalette open={open()} onOpenChange={setOpen} groups={groups} recent={recent()} onSelect={pick} />
+ * ```
+ *
+ * Filtering is linear and the results are not virtualized, so an app that expects thousands of items
+ * should cap each group (50 is a good start) or search on a server through `source`.
+ */
+export declare function CommandPalette(props: CommandPaletteProps): JSX.Element;
+export default CommandPalette;