@k2b/ui 0.44.0 → 0.46.0

package/dist/browser/feedback/prompts.js

@@ -2,42 +2,35 @@ import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
-import { setProperty as _$setProperty } from "solid-js/web";
-import { mergeProps as _$mergeProps } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
-import { getNextElement as _$getNextElement } from "solid-js/web";
-import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { addEventListener as _$addEventListener } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<header class=k2b-dialog__header><!$><!/><!$><!/><button type=button class=k2b-dialog__close><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-dialog__header-spacer>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<h2>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<p>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<button type=button class=k2b-button data-variant=secondary>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<form class=k2b-dialog__panel><!$><!/><div class="k2b-dialog__body k2b-prompt-form"></div><footer class=k2b-dialog__actions><!$><!/><button type=submit class=k2b-button>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-prompt-form__info>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-prompt-search__list role=listbox>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-prompt-search-shell><!$><!/><div class=k2b-prompt-search><label class=k2b-prompt-search__input><i aria-hidden=true></i><input type=search role=combobox aria-autocomplete=list autocapitalize=off autocomplete=off autocorrect=off><!$><!/></label><div class=k2b-prompt-search__collapse><div class=k2b-prompt-search__results><!$><!/><!$><!/>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<p class=k2b-prompt-search-shell__title>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-prompt-search__error role=status aria-live=polite>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<p role=status aria-live=polite>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<img alt>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-prompt-search__preview>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<button type=button role=option><!$><!/><span class=k2b-prompt-search__copy><strong></strong><!$><!/>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<small>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-prompt-copy>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-dialog__panel><!$><!/><div class=k2b-dialog__body></div><footer class=k2b-dialog__actions><button type=button class=k2b-button>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-dialog__panel><!$><!/><div class=k2b-dialog__body></div><footer class=k2b-dialog__actions><button type=button class=k2b-button data-variant=secondary></button><button type=button class=k2b-button>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<form class=k2b-dialog__panel><!$><!/><div class="k2b-dialog__body k2b-prompt-form"><div class=k2b-prompt-copy></div><!$><!/></div><footer class=k2b-dialog__actions><button type=button class=k2b-button data-variant=secondary></button><button type=submit class=k2b-button>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<code class=k2b-confirmation-phrase>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<div class="k2b-dialog__panel k2b-dialog__stack"><!$><!/><div class=k2b-dialog__content>`);
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<p>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<button type=button class=k2b-button data-variant=secondary>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<form class=k2b-dialog__panel><!$><!/><div class="k2b-dialog__body k2b-prompt-form"></div><footer class=k2b-dialog__actions><!$><!/><button type=submit class=k2b-button>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-prompt-form__info>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-prompt-search__list role=listbox>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-prompt-search-shell><!$><!/><div class=k2b-prompt-search><label class=k2b-prompt-search__input><i aria-hidden=true></i><input type=search role=combobox aria-autocomplete=list autocapitalize=off autocomplete=off autocorrect=off><!$><!/></label><div class=k2b-prompt-search__collapse><div class=k2b-prompt-search__results><!$><!/><!$><!/>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<p class=k2b-prompt-search-shell__title>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-prompt-search__error role=status aria-live=polite>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<p role=status aria-live=polite>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<img alt>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-prompt-search__preview>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<button type=button role=option><!$><!/><span class=k2b-prompt-search__copy><strong></strong><!$><!/>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<small>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-prompt-copy>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-dialog__panel><!$><!/><div class=k2b-dialog__body></div><footer class=k2b-dialog__actions><button type=button class=k2b-button>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div class="k2b-dialog__panel k2b-dialog__stack"><!$><!/><div class=k2b-dialog__content>`);
 import { mutation, timed } from "@k2b/stdlib/solid";
 import { createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, Show } from "solid-js";
 import { createStore } from "solid-js/store";
@@ -53,8 +46,9 @@ import { TextInput } from "../inputs/TextInput";
 import { KeyedFor } from "../internal/keyed-for";
 import { resolveUiMessages } from "../intl/messages";
 import { dialogCore } from "./dialog-core";
+import { contentClass, DialogHeader, panelClass, promptTone, sharedPrompts } from "./prompt-confirm";
 import { resolvePromptMessages } from "./prompt-messages";
-const PHRASE_SLOT = "\u0000";
+export { DialogHeader } from "./prompt-confirm";
 const isEmpty = value => value === undefined || value === null || value === "" || Array.isArray(value) && value.length === 0;
 export const createFormState = schema => {
   const messages = resolveUiMessages();
@@ -125,52 +119,11 @@ export const createFormState = schema => {
     reset
   };
 };
-export const DialogHeader = props => (() => {
-  var _el$ = _$getNextElement(_tmpl$),
-    _el$3 = _el$.firstChild,
-    [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling),
-    _el$5 = _el$4.nextSibling,
-    [_el$6, _co$2] = _$getNextMarker(_el$5.nextSibling),
-    _el$2 = _el$6.nextSibling;
-  _$insert(_el$, _$createComponent(Show, {
-    get when() {
-      return props.icon;
-    },
-    children: icon => (() => {
-      var _el$7 = _$getNextElement(_tmpl$2);
-      _$effect(() => _$className(_el$7, icon()));
-      return _el$7;
-    })()
-  }), _el$4, _co$);
-  _$insert(_el$, _$createComponent(Show, {
-    get when() {
-      return props.title;
-    },
-    get fallback() {
-      return _$getNextElement(_tmpl$3);
-    },
-    children: title => (() => {
-      var _el$9 = _$getNextElement(_tmpl$4);
-      _$insert(_el$9, title);
-      return _el$9;
-    })()
-  }), _el$6, _co$2);
-  _$addEventListener(_el$2, "click", props.close, true);
-  _$effect(() => _$setAttribute(_el$2, "aria-label", resolveUiMessages().closeDialog));
-  _$runHydrationEvents();
-  return _el$;
-})();
-const panelClass = options => {
-  const size = options?.size ?? "medium";
-  const variant = options?.variant && options.variant !== "primary" ? ` k2b-dialog--${options.variant}` : "";
-  return `k2b-dialog k2b-dialog--${size}${variant}${options?.surface === "bare" ? " is-bare" : ""}`;
-};
-const contentClass = surface => surface === "bare" ? "k2b-dialog__viewport is-bare" : "k2b-dialog__viewport";
 const renderInfo = content => {
   if (typeof content === "string") return (() => {
-    var _el$0 = _$getNextElement(_tmpl$5);
-    _$insert(_el$0, content);
-    return _el$0;
+    var _el$ = _$getNextElement(_tmpl$);
+    _$insert(_el$, content);
+    return _el$;
   })();
   if (typeof content === "function") return content();
   return content;
@@ -407,33 +360,36 @@ const PromptFormDialog = props => {
     submit();
   };
   return (() => {
-    var _el$1 = _$getNextElement(_tmpl$7),
-      _el$16 = _el$1.firstChild,
-      [_el$17, _co$4] = _$getNextMarker(_el$16.nextSibling),
-      _el$10 = _el$17.nextSibling,
-      _el$11 = _el$10.nextSibling,
-      _el$14 = _el$11.firstChild,
-      [_el$15, _co$3] = _$getNextMarker(_el$14.nextSibling),
-      _el$13 = _el$15.nextSibling;
-    _el$1.addEventListener("submit", handleSubmit);
-    _$insert(_el$1, _$createComponent(DialogHeader, {
+    var _el$2 = _$getNextElement(_tmpl$3),
+      _el$9 = _el$2.firstChild,
+      [_el$0, _co$2] = _$getNextMarker(_el$9.nextSibling),
+      _el$3 = _el$0.nextSibling,
+      _el$4 = _el$3.nextSibling,
+      _el$7 = _el$4.firstChild,
+      [_el$8, _co$] = _$getNextMarker(_el$7.nextSibling),
+      _el$6 = _el$8.nextSibling;
+    _el$2.addEventListener("submit", handleSubmit);
+    _$insert(_el$2, _$createComponent(DialogHeader, {
       get title() {
         return props.config.title;
       },
       get icon() {
         return props.config.icon;
       },
+      get tone() {
+        return promptTone(props.config.variant);
+      },
       close: () => props.close(null)
-    }), _el$17, _co$4);
-    _$insert(_el$10, _$createComponent(For, {
+    }), _el$0, _co$2);
+    _$insert(_el$3, _$createComponent(For, {
       get each() {
         return Object.entries(props.config.fields);
       },
       children: ([key, field]) => {
         if (field.type === "info") return (() => {
-          var _el$18 = _$getNextElement(_tmpl$8);
-          _$insert(_el$18, () => renderInfo(field.content));
-          return _el$18;
+          var _el$1 = _$getNextElement(_tmpl$4);
+          _$insert(_el$1, () => renderInfo(field.content));
+          return _el$1;
         })();
         return _$createComponent(PromptControl, {
           field: field,
@@ -444,21 +400,21 @@ const PromptFormDialog = props => {
         });
       }
     }));
-    _$insert(_el$11, _$createComponent(Show, {
+    _$insert(_el$4, _$createComponent(Show, {
       get when() {
         return props.config.cancelText !== false;
       },
       get children() {
-        var _el$12 = _$getNextElement(_tmpl$6);
-        _el$12.$$click = () => props.close(null);
-        _$insert(_el$12, () => props.config.cancelText || resolveUiMessages().cancel);
+        var _el$5 = _$getNextElement(_tmpl$2);
+        _el$5.$$click = () => props.close(null);
+        _$insert(_el$5, () => props.config.cancelText || resolveUiMessages().cancel);
         _$runHydrationEvents();
-        return _el$12;
+        return _el$5;
       }
-    }), _el$15, _co$3);
-    _$insert(_el$13, () => props.config.confirmText ?? resolveUiMessages().save);
-    _$effect(() => _$setAttribute(_el$13, "data-variant", props.config.variant ?? "primary"));
-    return _el$1;
+    }), _el$8, _co$);
+    _$insert(_el$6, () => props.config.confirmText ?? resolveUiMessages().save);
+    _$effect(() => _$setAttribute(_el$6, "data-variant", props.config.variant ?? "primary"));
+    return _el$2;
   })();
 };
 
@@ -574,32 +530,32 @@ const openSearchPrompt = (resolver, options) => dialogCore.open(close => {
     searchMutation.abort();
   });
   return (() => {
-    var _el$19 = _$getNextElement(_tmpl$1),
-      _el$34 = _el$19.firstChild,
-      [_el$35, _co$8] = _$getNextMarker(_el$34.nextSibling),
-      _el$20 = _el$35.nextSibling,
-      _el$21 = _el$20.firstChild,
-      _el$22 = _el$21.firstChild,
+    var _el$10 = _$getNextElement(_tmpl$7),
+      _el$25 = _el$10.firstChild,
+      [_el$26, _co$6] = _$getNextMarker(_el$25.nextSibling),
+      _el$11 = _el$26.nextSibling,
+      _el$12 = _el$11.firstChild,
+      _el$13 = _el$12.firstChild,
+      _el$14 = _el$13.nextSibling,
+      _el$16 = _el$14.nextSibling,
+      [_el$17, _co$3] = _$getNextMarker(_el$16.nextSibling),
+      _el$18 = _el$12.nextSibling,
+      _el$19 = _el$18.firstChild,
+      _el$21 = _el$19.firstChild,
+      [_el$22, _co$4] = _$getNextMarker(_el$21.nextSibling),
       _el$23 = _el$22.nextSibling,
-      _el$25 = _el$23.nextSibling,
-      [_el$26, _co$5] = _$getNextMarker(_el$25.nextSibling),
-      _el$27 = _el$21.nextSibling,
-      _el$28 = _el$27.firstChild,
-      _el$30 = _el$28.firstChild,
-      [_el$31, _co$6] = _$getNextMarker(_el$30.nextSibling),
-      _el$32 = _el$31.nextSibling,
-      [_el$33, _co$7] = _$getNextMarker(_el$32.nextSibling);
-    _$insert(_el$19, _$createComponent(Show, {
+      [_el$24, _co$5] = _$getNextMarker(_el$23.nextSibling);
+    _$insert(_el$10, _$createComponent(Show, {
       get when() {
         return options?.title;
       },
       children: title => (() => {
-        var _el$36 = _$getNextElement(_tmpl$10);
-        _$insert(_el$36, title);
-        return _el$36;
+        var _el$27 = _$getNextElement(_tmpl$8);
+        _$insert(_el$27, title);
+        return _el$27;
       })()
-    }), _el$35, _co$8);
-    _el$23.$$keydown = event => {
+    }), _el$26, _co$6);
+    _el$14.$$keydown = event => {
       if (event.key === "ArrowDown") {
         event.preventDefault();
         moveSelection(1);
@@ -611,108 +567,108 @@ const openSearchPrompt = (resolver, options) => dialogCore.open(close => {
         execute(items()[activeIndex()]);
       }
     };
-    _el$23.$$input = event => setQuery(event.currentTarget.value);
-    _$setAttribute(_el$23, "id", searchId);
-    _$setAttribute(_el$23, "aria-controls", listboxId);
-    _$setAttribute(_el$23, "spellcheck", false);
-    _$insert(_el$21, _$createComponent(Show, {
+    _el$14.$$input = event => setQuery(event.currentTarget.value);
+    _$setAttribute(_el$14, "id", searchId);
+    _$setAttribute(_el$14, "aria-controls", listboxId);
+    _$setAttribute(_el$14, "spellcheck", false);
+    _$insert(_el$12, _$createComponent(Show, {
       get when() {
         return searchMutation.loading();
       },
       get children() {
-        return _$getNextElement(_tmpl$9);
+        return _$getNextElement(_tmpl$5);
       }
-    }), _el$26, _co$5);
-    _el$28.addEventListener("wheel", event => event.stopPropagation());
-    _$insert(_el$28, _$createComponent(Show, {
+    }), _el$17, _co$3);
+    _el$19.addEventListener("wheel", event => event.stopPropagation());
+    _$insert(_el$19, _$createComponent(Show, {
       get when() {
         return searchError();
       },
       children: message => (() => {
-        var _el$37 = _$getNextElement(_tmpl$11);
-        _$insert(_el$37, message);
-        return _el$37;
+        var _el$28 = _$getNextElement(_tmpl$9);
+        _$insert(_el$28, message);
+        return _el$28;
       })()
-    }), _el$31, _co$6);
-    _$insert(_el$28, _$createComponent(Show, {
+    }), _el$22, _co$4);
+    _$insert(_el$19, _$createComponent(Show, {
       get when() {
         return items().length > 0;
       },
       get fallback() {
         return (() => {
-          var _el$38 = _$getNextElement(_tmpl$12);
-          _$insert(_el$38, emptyStateText);
-          return _el$38;
+          var _el$29 = _$getNextElement(_tmpl$0);
+          _$insert(_el$29, emptyStateText);
+          return _el$29;
         })();
       },
       get children() {
-        var _el$29 = _$getNextElement(_tmpl$0);
-        _$setAttribute(_el$29, "id", listboxId);
-        _$insert(_el$29, _$createComponent(KeyedFor, {
+        var _el$20 = _$getNextElement(_tmpl$6);
+        _$setAttribute(_el$20, "id", listboxId);
+        _$insert(_el$20, _$createComponent(KeyedFor, {
           get each() {
             return items();
           },
           by: searchRowIdentity,
           children: (item, index) => (() => {
-            var _el$39 = _$getNextElement(_tmpl$15),
-              _el$46 = _el$39.firstChild,
-              [_el$47, _co$0] = _$getNextMarker(_el$46.nextSibling),
-              _el$42 = _el$47.nextSibling,
-              _el$43 = _el$42.firstChild,
-              _el$44 = _el$43.nextSibling,
-              [_el$45, _co$9] = _$getNextMarker(_el$44.nextSibling);
-            _el$39.$$click = () => execute(item());
-            _el$39.addEventListener("mouseenter", () => setActiveIndex(index()));
+            var _el$30 = _$getNextElement(_tmpl$11),
+              _el$37 = _el$30.firstChild,
+              [_el$38, _co$8] = _$getNextMarker(_el$37.nextSibling),
+              _el$33 = _el$38.nextSibling,
+              _el$34 = _el$33.firstChild,
+              _el$35 = _el$34.nextSibling,
+              [_el$36, _co$7] = _$getNextMarker(_el$35.nextSibling);
+            _el$30.$$click = () => execute(item());
+            _el$30.addEventListener("mouseenter", () => setActiveIndex(index()));
             _$use(element => {
               if (!element) rowRefs.delete(index());else rowRefs.set(index(), element);
-            }, _el$39);
-            _$insert(_el$39, _$createComponent(Show, {
+            }, _el$30);
+            _$insert(_el$30, _$createComponent(Show, {
               get when() {
                 return item().previewUrl?.startsWith("/") || item().icon;
               },
               get children() {
-                var _el$40 = _$getNextElement(_tmpl$14);
-                _$insert(_el$40, _$createComponent(Show, {
+                var _el$31 = _$getNextElement(_tmpl$10);
+                _$insert(_el$31, _$createComponent(Show, {
                   get when() {
                     return _$memo(() => !!item().previewUrl?.startsWith("/"))() && !failedPreviews[index()];
                   },
                   get fallback() {
                     return (() => {
-                      var _el$48 = _$getNextElement(_tmpl$2);
-                      _$effect(() => _$className(_el$48, item().icon ?? "ti ti-file"));
-                      return _el$48;
+                      var _el$39 = _$getNextElement(_tmpl$12);
+                      _$effect(() => _$className(_el$39, item().icon ?? "ti ti-file"));
+                      return _el$39;
                     })();
                   },
                   get children() {
-                    var _el$41 = _$getNextElement(_tmpl$13);
-                    _el$41.addEventListener("error", () => setFailedPreviews(index(), true));
-                    _$effect(() => _$setAttribute(_el$41, "src", item().previewUrl));
-                    return _el$41;
+                    var _el$32 = _$getNextElement(_tmpl$1);
+                    _el$32.addEventListener("error", () => setFailedPreviews(index(), true));
+                    _$effect(() => _$setAttribute(_el$32, "src", item().previewUrl));
+                    return _el$32;
                   }
                 }));
-                return _el$40;
+                return _el$31;
               }
-            }), _el$47, _co$0);
-            _$insert(_el$43, () => item().label);
-            _$insert(_el$42, _$createComponent(Show, {
+            }), _el$38, _co$8);
+            _$insert(_el$34, () => item().label);
+            _$insert(_el$33, _$createComponent(Show, {
               get when() {
                 return item().desc;
               },
               children: description => (() => {
-                var _el$49 = _$getNextElement(_tmpl$16);
-                _$insert(_el$49, description);
-                return _el$49;
+                var _el$40 = _$getNextElement(_tmpl$13);
+                _$insert(_el$40, description);
+                return _el$40;
               })()
-            }), _el$45, _co$9);
+            }), _el$36, _co$7);
             _$effect(_p$ => {
               var _v$9 = optionId(index()),
                 _v$0 = activeIndex() === index(),
                 _v$1 = activeIndex() === index() ? "true" : undefined,
                 _v$10 = item().desc ? "true" : undefined;
-              _v$9 !== _p$.e && _$setAttribute(_el$39, "id", _p$.e = _v$9);
-              _v$0 !== _p$.t && _$setAttribute(_el$39, "aria-selected", _p$.t = _v$0);
-              _v$1 !== _p$.a && _$setAttribute(_el$39, "data-active", _p$.a = _v$1);
-              _v$10 !== _p$.o && _$setAttribute(_el$39, "data-has-description", _p$.o = _v$10);
+              _v$9 !== _p$.e && _$setAttribute(_el$30, "id", _p$.e = _v$9);
+              _v$0 !== _p$.t && _$setAttribute(_el$30, "aria-selected", _p$.t = _v$0);
+              _v$1 !== _p$.a && _$setAttribute(_el$30, "data-active", _p$.a = _v$1);
+              _v$10 !== _p$.o && _$setAttribute(_el$30, "data-has-description", _p$.o = _v$10);
               return _p$;
             }, {
               e: undefined,
@@ -721,13 +677,13 @@ const openSearchPrompt = (resolver, options) => dialogCore.open(close => {
               o: undefined
             });
             _$runHydrationEvents();
-            return _el$39;
+            return _el$30;
           })()
         }));
-        _$effect(() => _$setAttribute(_el$29, "aria-label", resolveUiMessages().searchResults));
-        return _el$29;
+        _$effect(() => _$setAttribute(_el$20, "aria-label", resolveUiMessages().searchResults));
+        return _el$20;
       }
-    }), _el$33, _co$7);
+    }), _el$24, _co$5);
     _$effect(_p$ => {
       var _v$ = options?.icon ?? "ti ti-search",
         _v$2 = options?.ariaLabel ?? options?.title ?? resolveUiMessages().search,
@@ -737,14 +693,14 @@ const openSearchPrompt = (resolver, options) => dialogCore.open(close => {
         _v$6 = options?.placeholder ?? resolveUiMessages().search,
         _v$7 = shouldShowResults() ? "var(--k2b-search-body-max)" : "0px",
         _v$8 = shouldShowResults() ? "1" : "0";
-      _v$ !== _p$.e && _$className(_el$22, _p$.e = _v$);
-      _v$2 !== _p$.t && _$setAttribute(_el$23, "aria-label", _p$.t = _v$2);
-      _v$3 !== _p$.a && _$setAttribute(_el$23, "aria-expanded", _p$.a = _v$3);
-      _v$4 !== _p$.o && _$setAttribute(_el$23, "aria-activedescendant", _p$.o = _v$4);
-      _v$5 !== _p$.i && _$setAttribute(_el$23, "aria-busy", _p$.i = _v$5);
-      _v$6 !== _p$.n && _$setAttribute(_el$23, "placeholder", _p$.n = _v$6);
-      _v$7 !== _p$.s && _$setStyleProperty(_el$27, "height", _p$.s = _v$7);
-      _v$8 !== _p$.h && _$setStyleProperty(_el$27, "opacity", _p$.h = _v$8);
+      _v$ !== _p$.e && _$className(_el$13, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$14, "aria-label", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$14, "aria-expanded", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute(_el$14, "aria-activedescendant", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setAttribute(_el$14, "aria-busy", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$setAttribute(_el$14, "placeholder", _p$.n = _v$6);
+      _v$7 !== _p$.s && _$setStyleProperty(_el$18, "height", _p$.s = _v$7);
+      _v$8 !== _p$.h && _$setStyleProperty(_el$18, "opacity", _p$.h = _v$8);
       return _p$;
     }, {
       e: undefined,
@@ -756,9 +712,9 @@ const openSearchPrompt = (resolver, options) => dialogCore.open(close => {
       s: undefined,
       h: undefined
     });
-    _$effect(() => _$setProperty(_el$23, "value", query()));
+    _$effect(() => _$setProperty(_el$14, "value", query()));
     _$runHydrationEvents();
-    return _el$19;
+    return _el$10;
   })();
 }, {
   panelClassName: "k2b-dialog k2b-dialog--search is-bare",
@@ -775,9 +731,9 @@ const promptText = (content, defaultValue, options) => prompts.form({
     message: {
       type: "info",
       content: () => (() => {
-        var _el$50 = _$getNextElement(_tmpl$17);
-        _$insert(_el$50, content);
-        return _el$50;
+        var _el$41 = _$getNextElement(_tmpl$14);
+        _$insert(_el$41, content);
+        return _el$41;
       })()
     },
     value: {
@@ -793,9 +749,9 @@ const promptNumber = (content, defaultValue, options) => prompts.form({
     message: {
       type: "info",
       content: () => (() => {
-        var _el$51 = _$getNextElement(_tmpl$17);
-        _$insert(_el$51, content);
-        return _el$51;
+        var _el$42 = _$getNextElement(_tmpl$14);
+        _$insert(_el$42, content);
+        return _el$42;
       })()
     },
     value: {
@@ -807,29 +763,35 @@ const promptNumber = (content, defaultValue, options) => prompts.form({
     }
   }
 }).then(result => result?.value ?? null);
-export const prompts = {
+
+// The same object as `sharedPrompts`, which `PanelDialog` uses for its discard question: replacing `prompts.confirm`
+// (for example in a test) therefore reaches every confirmation.
+export const prompts = Object.assign(sharedPrompts, {
   alert: (content, options) => dialogCore.open(close => (() => {
-    var _el$52 = _$getNextElement(_tmpl$18),
-      _el$56 = _el$52.firstChild,
-      [_el$57, _co$1] = _$getNextMarker(_el$56.nextSibling),
-      _el$53 = _el$57.nextSibling,
-      _el$54 = _el$53.nextSibling,
-      _el$55 = _el$54.firstChild;
-    _$insert(_el$52, _$createComponent(DialogHeader, {
+    var _el$43 = _$getNextElement(_tmpl$15),
+      _el$47 = _el$43.firstChild,
+      [_el$48, _co$9] = _$getNextMarker(_el$47.nextSibling),
+      _el$44 = _el$48.nextSibling,
+      _el$45 = _el$44.nextSibling,
+      _el$46 = _el$45.firstChild;
+    _$insert(_el$43, _$createComponent(DialogHeader, {
       get title() {
         return options?.title || resolveUiMessages().info;
       },
       get icon() {
         return options?.icon;
       },
+      get tone() {
+        return promptTone(options?.variant);
+      },
       close: () => close()
-    }), _el$57, _co$1);
-    _$insert(_el$53, content);
-    _el$55.$$click = () => close();
-    _$insert(_el$55, () => options?.confirmText || resolveUiMessages().ok);
-    _$effect(() => _$setAttribute(_el$55, "data-variant", options?.variant ?? "primary"));
+    }), _el$48, _co$9);
+    _$insert(_el$44, content);
+    _el$46.$$click = () => close();
+    _$insert(_el$46, () => options?.confirmText || resolveUiMessages().ok);
+    _$effect(() => _$setAttribute(_el$46, "data-variant", options?.variant ?? "primary"));
     _$runHydrationEvents();
-    return _el$52;
+    return _el$43;
   })(), {
     panelClassName: panelClass(options),
     contentClassName: contentClass(options?.surface),
@@ -841,122 +803,8 @@ export const prompts = {
   success: (content, options) => prompts.alert(content, {
     ...options,
     variant: "success",
-    title: options?.title ?? resolveUiMessages().success,
-    icon: options?.icon ?? "ti ti-check"
+    title: options?.title ?? resolveUiMessages().success
   }),
-  confirm: (content, options) => {
-    const confirmationPhrase = options?.confirmationPhrase;
-    if (confirmationPhrase !== undefined && (confirmationPhrase.trim().length === 0 || /[\r\n\t]/.test(confirmationPhrase))) {
-      throw new Error("confirmationPhrase must be non-empty, visible, and single-line");
-    }
-    let confirmationInput;
-    return dialogCore.open(close => {
-      if (!confirmationPhrase) {
-        return (() => {
-          var _el$58 = _$getNextElement(_tmpl$19),
-            _el$63 = _el$58.firstChild,
-            [_el$64, _co$10] = _$getNextMarker(_el$63.nextSibling),
-            _el$59 = _el$64.nextSibling,
-            _el$60 = _el$59.nextSibling,
-            _el$61 = _el$60.firstChild,
-            _el$62 = _el$61.nextSibling;
-          _$insert(_el$58, _$createComponent(DialogHeader, {
-            get title() {
-              return options?.title;
-            },
-            get icon() {
-              return options?.icon;
-            },
-            close: () => close(false)
-          }), _el$64, _co$10);
-          _$insert(_el$59, content);
-          _el$61.$$click = () => close(false);
-          _$insert(_el$61, () => options?.cancelText || resolveUiMessages().cancel);
-          _el$62.$$click = () => close(true);
-          _$insert(_el$62, () => options?.confirmText || resolvePromptMessages().confirm);
-          _$effect(() => _$setAttribute(_el$62, "data-variant", options?.variant ?? "primary"));
-          _$runHydrationEvents();
-          return _el$58;
-        })();
-      }
-
-      // The catalog owns word order; the slot marks where the verbatim phrase is rendered as code.
-      const [labelBefore, labelAfter] = resolvePromptMessages().typeToConfirm({
-        phrase: PHRASE_SLOT
-      }).split(PHRASE_SLOT);
-      const [confirmationValue, setConfirmationValue] = createSignal("");
-      const canConfirm = () => confirmationValue() === confirmationPhrase;
-      const submit = event => {
-        event.preventDefault();
-        if (canConfirm()) close(true);
-      };
-      return (() => {
-        var _el$65 = _$getNextElement(_tmpl$20),
-          _el$73 = _el$65.firstChild,
-          [_el$74, _co$12] = _$getNextMarker(_el$73.nextSibling),
-          _el$66 = _el$74.nextSibling,
-          _el$67 = _el$66.firstChild,
-          _el$68 = _el$67.nextSibling,
-          [_el$69, _co$11] = _$getNextMarker(_el$68.nextSibling),
-          _el$70 = _el$66.nextSibling,
-          _el$71 = _el$70.firstChild,
-          _el$72 = _el$71.nextSibling;
-        _el$65.addEventListener("submit", submit);
-        _$insert(_el$65, _$createComponent(DialogHeader, {
-          get title() {
-            return options?.title;
-          },
-          get icon() {
-            return options?.icon;
-          },
-          close: () => close(false)
-        }), _el$74, _co$12);
-        _$insert(_el$67, content);
-        _$insert(_el$66, _$createComponent(TextInput, {
-          ref: element => {
-            confirmationInput = element;
-          },
-          get label() {
-            return [labelBefore, (() => {
-              var _el$75 = _$getNextElement(_tmpl$21);
-              _$insert(_el$75, confirmationPhrase);
-              return _el$75;
-            })(), labelAfter];
-          },
-          value: confirmationValue,
-          onValueChange: setConfirmationValue,
-          autocomplete: "off",
-          autocapitalize: "off",
-          spellcheck: false,
-          monospace: true,
-          required: true
-        }), _el$69, _co$11);
-        _el$71.$$click = () => close(false);
-        _$insert(_el$71, () => options?.cancelText || resolveUiMessages().cancel);
-        _$insert(_el$72, () => options?.confirmText || resolvePromptMessages().confirm);
-        _$effect(_p$ => {
-          var _v$11 = options?.variant ?? "primary",
-            _v$12 = !canConfirm();
-          _v$11 !== _p$.e && _$setAttribute(_el$72, "data-variant", _p$.e = _v$11);
-          _v$12 !== _p$.t && _$setProperty(_el$72, "disabled", _p$.t = _v$12);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined
-        });
-        _$runHydrationEvents();
-        return _el$65;
-      })();
-    }, {
-      panelClassName: panelClass(options),
-      contentClassName: contentClass(options?.surface),
-      initialFocus: confirmationPhrase ? () => confirmationInput ?? null : undefined,
-      signal: options?.signal,
-      cancelBehavior: options?.cancelBehavior,
-      history: options?.history,
-      ariaLabel: options?.ariaLabel ?? options?.title ?? resolvePromptMessages().confirmation
-    });
-  },
   prompt: promptText,
   promptNumber,
   form: async config => (await dialogCore.open(close => _$createComponent(PromptFormDialog, {
@@ -987,11 +835,11 @@ export const prompts = {
     });
     if (options?.surface === "bare" && options.header === false) return body;
     return (() => {
-      var _el$76 = _$getNextElement(_tmpl$22),
-        _el$78 = _el$76.firstChild,
-        [_el$79, _co$13] = _$getNextMarker(_el$78.nextSibling),
-        _el$77 = _el$79.nextSibling;
-      _$insert(_el$76, _$createComponent(Show, {
+      var _el$49 = _$getNextElement(_tmpl$16),
+        _el$51 = _el$49.firstChild,
+        [_el$52, _co$0] = _$getNextMarker(_el$51.nextSibling),
+        _el$50 = _el$52.nextSibling;
+      _$insert(_el$49, _$createComponent(Show, {
         get when() {
           return options?.header !== false;
         },
@@ -1003,12 +851,15 @@ export const prompts = {
             get icon() {
               return options?.icon;
             },
+            get tone() {
+              return promptTone(options?.variant);
+            },
             close: () => dismiss()
           });
         }
-      }), _el$79, _co$13);
-      _$insert(_el$77, body);
-      return _el$76;
+      }), _el$52, _co$0);
+      _$insert(_el$50, body);
+      return _el$49;
     })();
   }, {
     panelClassName: panelClass(options),
@@ -1020,26 +871,27 @@ export const prompts = {
   }),
   search: openSearchPrompt,
   error: (content, options) => dialogCore.open(close => (() => {
-    var _el$80 = _$getNextElement(_tmpl$18),
-      _el$84 = _el$80.firstChild,
-      [_el$85, _co$14] = _$getNextMarker(_el$84.nextSibling),
-      _el$81 = _el$85.nextSibling,
-      _el$82 = _el$81.nextSibling,
-      _el$83 = _el$82.firstChild;
-    _$insert(_el$80, _$createComponent(DialogHeader, {
+    var _el$53 = _$getNextElement(_tmpl$15),
+      _el$57 = _el$53.firstChild,
+      [_el$58, _co$1] = _$getNextMarker(_el$57.nextSibling),
+      _el$54 = _el$58.nextSibling,
+      _el$55 = _el$54.nextSibling,
+      _el$56 = _el$55.firstChild;
+    _$insert(_el$53, _$createComponent(DialogHeader, {
       get title() {
         return options?.title ?? resolveUiMessages().error;
       },
       get icon() {
-        return options?.icon ?? "ti ti-alert-circle";
+        return options?.icon;
       },
+      tone: "danger",
       close: close
-    }), _el$85, _co$14);
-    _$insert(_el$81, content);
-    _el$83.$$click = () => close();
-    _$insert(_el$83, () => options?.confirmText || resolveUiMessages().close);
+    }), _el$58, _co$1);
+    _$insert(_el$54, content);
+    _el$56.$$click = () => close();
+    _$insert(_el$56, () => options?.confirmText || resolveUiMessages().close);
     _$runHydrationEvents();
-    return _el$80;
+    return _el$53;
   })(), {
     panelClassName: panelClass({
       ...options,
@@ -1051,6 +903,6 @@ export const prompts = {
     history: options?.history,
     ariaLabel: options?.ariaLabel ?? options?.title ?? resolveUiMessages().error
   })
-};
+});
 _$delegateEvents(["click", "input", "keydown"]);
 //# sourceMappingURL=prompts.js.map