@k2b/ui 0.33.0 → 0.34.0

package/dist/browser/layout/Settings.js

@@ -11,21 +11,23 @@ import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<p>`),
   _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-settings-page__actions>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<footer class=k2b-settings-page__footer>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<section><header class=k2b-settings-page__header><!$><!/><div class=k2b-settings-page__heading><h1></h1><!$><!/></div><!$><!/></header><div class=k2b-settings-page__body></div><!$><!/>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-settings-section__actions>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<section><header class=k2b-settings-section__header><!$><!/><div class=k2b-settings-section__heading><h2></h2><!$><!/></div><!$><!/></header><div class=k2b-settings-section__body>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<section><header class=k2b-settings-group__header><div class=k2b-settings-group__heading><h3></h3><!$><!/></div><!$><!/></header><div class=k2b-settings-group__body>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-settings-group__action>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<div><div class=k2b-settings-field__copy><div class=k2b-settings-field__heading><strong></strong><!$><!/></div><p></p></div><!$><!/><!$><!/>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<p class=k2b-settings-field__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i> <!$><!/>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<i class="ti ti-device-floppy"aria-hidden=true>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-settings-actions><!$><!/><!$><!/>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div><p role=status aria-live=polite><strong></strong> <!$><!/></p><!$><!/>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<strong>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<p class=k2b-settings-panel-footer__status role=status aria-live=polite>`);
+  _tmpl$3 = /*#__PURE__*/_$template(`<header class=k2b-settings-page__header><!$><!/><div class=k2b-settings-page__heading><h1></h1><!$><!/></div><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<footer class=k2b-settings-page__footer>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-settings-page__body></div><!$><!/>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-settings-section__actions>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<section><header class=k2b-settings-section__header><!$><!/><div class=k2b-settings-section__heading><h2></h2><!$><!/></div><!$><!/></header><div class=k2b-settings-section__body>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<section><header class=k2b-settings-group__header><div class=k2b-settings-group__heading><h3></h3><!$><!/></div><!$><!/></header><div class=k2b-settings-group__body>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-settings-group__action>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div><div class=k2b-settings-field__copy><div class=k2b-settings-field__heading><strong></strong><!$><!/></div><p></p></div><!$><!/><!$><!/>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<p class=k2b-settings-field__error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i> <!$><!/>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<i class="ti ti-device-floppy"aria-hidden=true>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-settings-actions><!$><!/><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div><p role=status aria-live=polite><strong></strong> <!$><!/></p><!$><!/>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<strong>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<p class=k2b-settings-panel-footer__status role=status aria-live=polite>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div><span class=k2b-save-status__slot><span class=k2b-save-status__state role=status aria-live=polite><i aria-hidden=true></i><!$><!/></span></span><!$><!/>`);
 import { children, createMemo, createUniqueId, Show } from "solid-js";
 import { Button } from "../actions/Button";
 import { usePromptMessages } from "../feedback/prompt-messages";
@@ -33,73 +35,86 @@ import { useSettingsMessages } from "./settings-messages";
 const read = value => typeof value === "function" ? value() : value;
 export function SettingsPage(props) {
   return (() => {
-    var _el$ = _$getNextElement(_tmpl$4),
-      _el$2 = _el$.firstChild,
-      _el$9 = _el$2.firstChild,
-      [_el$0, _co$2] = _$getNextMarker(_el$9.nextSibling),
-      _el$3 = _el$0.nextSibling,
-      _el$4 = _el$3.firstChild,
-      _el$6 = _el$4.nextSibling,
-      [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling),
-      _el$1 = _el$3.nextSibling,
-      [_el$10, _co$3] = _$getNextMarker(_el$1.nextSibling),
-      _el$11 = _el$2.nextSibling,
-      _el$13 = _el$11.nextSibling,
-      [_el$14, _co$4] = _$getNextMarker(_el$13.nextSibling);
-    _$insert(_el$2, _$createComponent(Show, {
-      get when() {
-        return props.icon;
-      },
-      children: icon => (() => {
-        var _el$15 = _$getNextElement(_tmpl$5);
-        _$effect(() => _$className(_el$15, icon()));
-        return _el$15;
-      })()
-    }), _el$0, _co$2);
-    _$insert(_el$4, () => props.title);
-    _$insert(_el$3, _$createComponent(Show, {
-      get when() {
-        return props.subtitle;
-      },
-      get children() {
-        var _el$5 = _$getNextElement(_tmpl$);
-        _$insert(_el$5, () => props.subtitle);
-        return _el$5;
-      }
-    }), _el$7, _co$);
-    _$insert(_el$2, _$createComponent(Show, {
+    var _el$ = _$getNextElement(_tmpl$5),
+      _el$13 = _el$.firstChild,
+      [_el$14, _co$4] = _$getNextMarker(_el$13.nextSibling),
+      _el$11 = _el$14.nextSibling,
+      _el$15 = _el$11.nextSibling,
+      [_el$16, _co$5] = _$getNextMarker(_el$15.nextSibling);
+    _$insert(_el$, _$createComponent(Show, {
       get when() {
-        return props.actions;
+        return props.header !== false;
       },
       get children() {
-        var _el$8 = _$getNextElement(_tmpl$2);
-        _$insert(_el$8, () => props.actions);
-        return _el$8;
+        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.firstChild,
+          _el$6 = _el$4.nextSibling,
+          [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling),
+          _el$1 = _el$3.nextSibling,
+          [_el$10, _co$3] = _$getNextMarker(_el$1.nextSibling);
+        _$insert(_el$2, _$createComponent(Show, {
+          get when() {
+            return props.icon;
+          },
+          children: icon => (() => {
+            var _el$17 = _$getNextElement(_tmpl$6);
+            _$effect(() => _$className(_el$17, icon()));
+            return _el$17;
+          })()
+        }), _el$0, _co$2);
+        _$insert(_el$4, () => props.title);
+        _$insert(_el$3, _$createComponent(Show, {
+          get when() {
+            return props.subtitle;
+          },
+          get children() {
+            var _el$5 = _$getNextElement(_tmpl$);
+            _$insert(_el$5, () => props.subtitle);
+            return _el$5;
+          }
+        }), _el$7, _co$);
+        _$insert(_el$2, _$createComponent(Show, {
+          get when() {
+            return props.actions;
+          },
+          get children() {
+            var _el$8 = _$getNextElement(_tmpl$2);
+            _$insert(_el$8, () => props.actions);
+            return _el$8;
+          }
+        }), _el$10, _co$3);
+        return _el$2;
       }
-    }), _el$10, _co$3);
+    }), _el$14, _co$4);
     _$insert(_el$11, () => props.children);
     _$insert(_el$, _$createComponent(Show, {
       get when() {
         return props.footer;
       },
       get children() {
-        var _el$12 = _$getNextElement(_tmpl$3);
+        var _el$12 = _$getNextElement(_tmpl$4);
         _$insert(_el$12, () => props.footer);
         return _el$12;
       }
-    }), _el$14, _co$4);
+    }), _el$16, _co$5);
     _$effect(_p$ => {
       var _v$ = `k2b-settings-page${props.class ? ` ${props.class}` : ""}`,
         _v$2 = props.style,
-        _v$3 = props.scrollPreserveKey;
+        _v$3 = props.header === false && typeof props.title === "string" ? props.title : undefined,
+        _v$4 = props.scrollPreserveKey;
       _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
       _p$.t = _$style(_el$, _v$2, _p$.t);
-      _v$3 !== _p$.a && _$setAttribute(_el$11, "data-scroll-preserve", _p$.a = _v$3);
+      _v$3 !== _p$.a && _$setAttribute(_el$, "aria-label", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute(_el$11, "data-scroll-preserve", _p$.o = _v$4);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
     return _el$;
   })();
@@ -111,53 +126,53 @@ export function SettingsPage(props) {
 export function SettingsSection(props) {
   const headingId = `k2b-settings-section-${createUniqueId()}`;
   return (() => {
-    var _el$16 = _$getNextElement(_tmpl$7),
-      _el$17 = _el$16.firstChild,
-      _el$24 = _el$17.firstChild,
-      [_el$25, _co$6] = _$getNextMarker(_el$24.nextSibling),
-      _el$18 = _el$25.nextSibling,
+    var _el$18 = _$getNextElement(_tmpl$8),
       _el$19 = _el$18.firstChild,
-      _el$21 = _el$19.nextSibling,
-      [_el$22, _co$5] = _$getNextMarker(_el$21.nextSibling),
-      _el$26 = _el$18.nextSibling,
+      _el$26 = _el$19.firstChild,
       [_el$27, _co$7] = _$getNextMarker(_el$26.nextSibling),
-      _el$28 = _el$17.nextSibling;
-    _$setAttribute(_el$16, "aria-labelledby", headingId);
-    _$insert(_el$17, _$createComponent(Show, {
+      _el$20 = _el$27.nextSibling,
+      _el$21 = _el$20.firstChild,
+      _el$23 = _el$21.nextSibling,
+      [_el$24, _co$6] = _$getNextMarker(_el$23.nextSibling),
+      _el$28 = _el$20.nextSibling,
+      [_el$29, _co$8] = _$getNextMarker(_el$28.nextSibling),
+      _el$30 = _el$19.nextSibling;
+    _$setAttribute(_el$18, "aria-labelledby", headingId);
+    _$insert(_el$19, _$createComponent(Show, {
       get when() {
         return props.icon;
       },
       children: icon => (() => {
-        var _el$29 = _$getNextElement(_tmpl$5);
-        _$effect(() => _$className(_el$29, icon()));
-        return _el$29;
+        var _el$31 = _$getNextElement(_tmpl$6);
+        _$effect(() => _$className(_el$31, icon()));
+        return _el$31;
       })()
-    }), _el$25, _co$6);
-    _$setAttribute(_el$19, "id", headingId);
-    _$insert(_el$19, () => props.title);
-    _$insert(_el$18, _$createComponent(Show, {
+    }), _el$27, _co$7);
+    _$setAttribute(_el$21, "id", headingId);
+    _$insert(_el$21, () => props.title);
+    _$insert(_el$20, _$createComponent(Show, {
       get when() {
         return props.subtitle;
       },
       get children() {
-        var _el$20 = _$getNextElement(_tmpl$);
-        _$insert(_el$20, () => props.subtitle);
-        return _el$20;
+        var _el$22 = _$getNextElement(_tmpl$);
+        _$insert(_el$22, () => props.subtitle);
+        return _el$22;
       }
-    }), _el$22, _co$5);
-    _$insert(_el$17, _$createComponent(Show, {
+    }), _el$24, _co$6);
+    _$insert(_el$19, _$createComponent(Show, {
       get when() {
         return props.actions;
       },
       get children() {
-        var _el$23 = _$getNextElement(_tmpl$6);
-        _$insert(_el$23, () => props.actions);
-        return _el$23;
+        var _el$25 = _$getNextElement(_tmpl$7);
+        _$insert(_el$25, () => props.actions);
+        return _el$25;
       }
-    }), _el$27, _co$7);
-    _$insert(_el$28, () => props.children);
-    _$effect(() => _$className(_el$16, `k2b-settings-section${props.class ? ` ${props.class}` : ""}`));
-    return _el$16;
+    }), _el$29, _co$8);
+    _$insert(_el$30, () => props.children);
+    _$effect(() => _$className(_el$18, `k2b-settings-section${props.class ? ` ${props.class}` : ""}`));
+    return _el$18;
   })();
 }
 const SETTINGS_GROUP_ACTION = Symbol("SettingsGroup.Action");
@@ -179,41 +194,41 @@ export const SettingsGroup = props => {
   const content = createMemo(() => collectSettingsGroupContent(resolved()));
   const headingId = `k2b-settings-group-${createUniqueId()}`;
   return (() => {
-    var _el$30 = _$getNextElement(_tmpl$8),
-      _el$31 = _el$30.firstChild,
-      _el$32 = _el$31.firstChild,
+    var _el$32 = _$getNextElement(_tmpl$9),
       _el$33 = _el$32.firstChild,
-      _el$35 = _el$33.nextSibling,
-      [_el$36, _co$8] = _$getNextMarker(_el$35.nextSibling),
-      _el$37 = _el$32.nextSibling,
+      _el$34 = _el$33.firstChild,
+      _el$35 = _el$34.firstChild,
+      _el$37 = _el$35.nextSibling,
       [_el$38, _co$9] = _$getNextMarker(_el$37.nextSibling),
-      _el$39 = _el$31.nextSibling;
-    _$setAttribute(_el$30, "aria-labelledby", headingId);
-    _$setAttribute(_el$33, "id", headingId);
-    _$insert(_el$33, () => props.title);
-    _$insert(_el$32, _$createComponent(Show, {
+      _el$39 = _el$34.nextSibling,
+      [_el$40, _co$0] = _$getNextMarker(_el$39.nextSibling),
+      _el$41 = _el$33.nextSibling;
+    _$setAttribute(_el$32, "aria-labelledby", headingId);
+    _$setAttribute(_el$35, "id", headingId);
+    _$insert(_el$35, () => props.title);
+    _$insert(_el$34, _$createComponent(Show, {
       get when() {
         return props.description;
       },
       get children() {
-        var _el$34 = _$getNextElement(_tmpl$);
-        _$insert(_el$34, () => props.description);
-        return _el$34;
+        var _el$36 = _$getNextElement(_tmpl$);
+        _$insert(_el$36, () => props.description);
+        return _el$36;
       }
-    }), _el$36, _co$8);
-    _$insert(_el$31, _$createComponent(Show, {
+    }), _el$38, _co$9);
+    _$insert(_el$33, _$createComponent(Show, {
       get when() {
         return action();
       },
       children: slot => (() => {
-        var _el$40 = _$getNextElement(_tmpl$9);
-        _$insert(_el$40, () => slot().props.children);
-        return _el$40;
+        var _el$42 = _$getNextElement(_tmpl$0);
+        _$insert(_el$42, () => slot().props.children);
+        return _el$42;
       })()
-    }), _el$38, _co$9);
-    _$insert(_el$39, content);
-    _$effect(() => _$className(_el$30, `k2b-settings-group${props.class ? ` ${props.class}` : ""}`));
-    return _el$30;
+    }), _el$40, _co$0);
+    _$insert(_el$41, content);
+    _$effect(() => _$className(_el$32, `k2b-settings-group${props.class ? ` ${props.class}` : ""}`));
+    return _el$32;
   })();
 };
 SettingsGroup.Action = SettingsGroupAction;
@@ -235,48 +250,48 @@ export function SettingsField(props) {
     describedBy
   }) : props.children;
   return (() => {
-    var _el$41 = _$getNextElement(_tmpl$1),
-      _el$42 = _el$41.firstChild,
-      _el$43 = _el$42.firstChild,
+    var _el$43 = _$getNextElement(_tmpl$10),
       _el$44 = _el$43.firstChild,
-      _el$46 = _el$44.nextSibling,
-      [_el$47, _co$0] = _$getNextMarker(_el$46.nextSibling),
-      _el$48 = _el$43.nextSibling,
-      _el$49 = _el$42.nextSibling,
-      [_el$50, _co$1] = _$getNextMarker(_el$49.nextSibling),
-      _el$51 = _el$50.nextSibling,
-      [_el$52, _co$10] = _$getNextMarker(_el$51.nextSibling);
-    _$insert(_el$44, () => props.label);
-    _$insert(_el$43, _$createComponent(Show, {
+      _el$45 = _el$44.firstChild,
+      _el$46 = _el$45.firstChild,
+      _el$48 = _el$46.nextSibling,
+      [_el$49, _co$1] = _$getNextMarker(_el$48.nextSibling),
+      _el$50 = _el$45.nextSibling,
+      _el$51 = _el$44.nextSibling,
+      [_el$52, _co$10] = _$getNextMarker(_el$51.nextSibling),
+      _el$53 = _el$52.nextSibling,
+      [_el$54, _co$11] = _$getNextMarker(_el$53.nextSibling);
+    _$insert(_el$46, () => props.label);
+    _$insert(_el$45, _$createComponent(Show, {
       get when() {
         return _$memo(() => props.changed !== undefined)() && read(props.changed);
       },
       get children() {
-        var _el$45 = _$getNextElement(_tmpl$0);
-        _$insert(_el$45, () => settingsMessages().unsaved);
-        return _el$45;
+        var _el$47 = _$getNextElement(_tmpl$1);
+        _$insert(_el$47, () => settingsMessages().unsaved);
+        return _el$47;
       }
-    }), _el$47, _co$0);
-    _$setAttribute(_el$48, "id", descriptionId);
-    _$insert(_el$48, () => props.description);
-    _$insert(_el$41, control, _el$50, _co$1);
-    _$insert(_el$41, _$createComponent(Show, {
+    }), _el$49, _co$1);
+    _$setAttribute(_el$50, "id", descriptionId);
+    _$insert(_el$50, () => props.description);
+    _$insert(_el$43, control, _el$52, _co$10);
+    _$insert(_el$43, _$createComponent(Show, {
       get when() {
         return read(props.error);
       },
       children: error => (() => {
-        var _el$53 = _$getNextElement(_tmpl$10),
-          _el$54 = _el$53.firstChild,
-          _el$55 = _el$54.nextSibling,
-          _el$56 = _el$55.nextSibling,
-          [_el$57, _co$11] = _$getNextMarker(_el$56.nextSibling);
-        _$setAttribute(_el$53, "id", errorId);
-        _$insert(_el$53, error, _el$57, _co$11);
-        return _el$53;
+        var _el$55 = _$getNextElement(_tmpl$11),
+          _el$56 = _el$55.firstChild,
+          _el$57 = _el$56.nextSibling,
+          _el$58 = _el$57.nextSibling,
+          [_el$59, _co$12] = _$getNextMarker(_el$58.nextSibling);
+        _$setAttribute(_el$55, "id", errorId);
+        _$insert(_el$55, error, _el$59, _co$12);
+        return _el$55;
       })()
-    }), _el$52, _co$10);
-    _$effect(() => _$className(_el$41, `k2b-settings-field ${props.class ?? ""}`));
-    return _el$41;
+    }), _el$54, _co$11);
+    _$effect(() => _$className(_el$43, `k2b-settings-field ${props.class ?? ""}`));
+    return _el$43;
   })();
 }
 const SettingsActions = props => {
@@ -287,12 +302,12 @@ const SettingsActions = props => {
   const disabled = () => loading() || Boolean(props.disableWithoutChanges && changeCount() === 0);
   const saveDisabled = () => disabled() || Boolean(props.saveDisabled !== undefined && read(props.saveDisabled));
   return (() => {
-    var _el$58 = _$getNextElement(_tmpl$12),
-      _el$60 = _el$58.firstChild,
-      [_el$61, _co$12] = _$getNextMarker(_el$60.nextSibling),
-      _el$62 = _el$61.nextSibling,
-      [_el$63, _co$13] = _$getNextMarker(_el$62.nextSibling);
-    _$insert(_el$58, _$createComponent(Button, {
+    var _el$60 = _$getNextElement(_tmpl$13),
+      _el$62 = _el$60.firstChild,
+      [_el$63, _co$13] = _$getNextMarker(_el$62.nextSibling),
+      _el$64 = _el$63.nextSibling,
+      [_el$65, _co$14] = _$getNextMarker(_el$64.nextSibling);
+    _$insert(_el$60, _$createComponent(Button, {
       variant: "secondary",
       get disabled() {
         return disabled();
@@ -303,8 +318,8 @@ const SettingsActions = props => {
       get children() {
         return promptMessages().discard;
       }
-    }), _el$61, _co$12);
-    _$insert(_el$58, _$createComponent(Button, {
+    }), _el$63, _co$13);
+    _$insert(_el$60, _$createComponent(Button, {
       get variant() {
         return props.saveVariant ?? "primary";
       },
@@ -321,10 +336,10 @@ const SettingsActions = props => {
         return props.onSave;
       },
       get children() {
-        return [_$getNextElement(_tmpl$11), _$memo(() => props.saveLabel ?? settingsMessages().saveChanges)];
+        return [_$getNextElement(_tmpl$12), _$memo(() => props.saveLabel ?? settingsMessages().saveChanges)];
       }
-    }), _el$63, _co$13);
-    return _el$58;
+    }), _el$65, _co$14);
+    return _el$60;
   })();
 };
 export function SettingsSaveBar(props) {
@@ -335,21 +350,21 @@ export function SettingsSaveBar(props) {
       return changeCount() > 0;
     },
     get children() {
-      var _el$64 = _$getNextElement(_tmpl$13),
-        _el$65 = _el$64.firstChild,
-        _el$66 = _el$65.firstChild,
-        _el$67 = _el$66.nextSibling,
-        _el$68 = _el$67.nextSibling,
-        [_el$69, _co$14] = _$getNextMarker(_el$68.nextSibling),
-        _el$70 = _el$65.nextSibling,
-        [_el$71, _co$15] = _$getNextMarker(_el$70.nextSibling);
-      _$insert(_el$66, changeCount);
-      _$insert(_el$65, () => settingsMessages().unsavedChangeLabel({
+      var _el$66 = _$getNextElement(_tmpl$14),
+        _el$67 = _el$66.firstChild,
+        _el$68 = _el$67.firstChild,
+        _el$69 = _el$68.nextSibling,
+        _el$70 = _el$69.nextSibling,
+        [_el$71, _co$15] = _$getNextMarker(_el$70.nextSibling),
+        _el$72 = _el$67.nextSibling,
+        [_el$73, _co$16] = _$getNextMarker(_el$72.nextSibling);
+      _$insert(_el$68, changeCount);
+      _$insert(_el$67, () => settingsMessages().unsavedChangeLabel({
         count: changeCount()
-      }), _el$69, _co$14);
-      _$insert(_el$64, _$createComponent(SettingsActions, props), _el$71, _co$15);
-      _$effect(() => _$className(_el$64, `k2b-settings-save-bar ${props.class ?? ""}`));
-      return _el$64;
+      }), _el$71, _co$15);
+      _$insert(_el$66, _$createComponent(SettingsActions, props), _el$73, _co$16);
+      _$effect(() => _$className(_el$66, `k2b-settings-save-bar ${props.class ?? ""}`));
+      return _el$66;
     }
   });
 }
@@ -357,8 +372,8 @@ export function SettingsPanelFooter(props) {
   const settingsMessages = useSettingsMessages();
   const changeCount = () => read(props.changeCount);
   return [(() => {
-    var _el$72 = _$getNextElement(_tmpl$15);
-    _$insert(_el$72, _$createComponent(Show, {
+    var _el$74 = _$getNextElement(_tmpl$16);
+    _$insert(_el$74, _$createComponent(Show, {
       get when() {
         return changeCount() > 0;
       },
@@ -367,17 +382,110 @@ export function SettingsPanelFooter(props) {
       },
       get children() {
         return [(() => {
-          var _el$73 = _$getNextElement(_tmpl$14);
-          _$insert(_el$73, changeCount);
-          return _el$73;
+          var _el$75 = _$getNextElement(_tmpl$15);
+          _$insert(_el$75, changeCount);
+          return _el$75;
         })(), " ", _$memo(() => settingsMessages().unsavedChangeLabel({
           count: changeCount()
         }))];
       }
     }));
-    return _el$72;
+    return _el$74;
   })(), _$createComponent(SettingsActions, _$mergeProps(props, {
     disableWithoutChanges: true
   }))];
 }
+const SAVE_STATUS_ICON = {
+  saved: "ti ti-check",
+  draft: "ti ti-pencil",
+  saving: "ti ti-loader-2",
+  failed: "ti ti-alert-triangle",
+  invalid: "ti ti-alert-triangle",
+  unknown: "ti ti-help-circle",
+  readonly: "ti ti-lock"
+};
+
+/**
+ * The save status of a settings form at one fixed place, usually the head of its column. It reserves its width, so
+ * a change of state never moves the title or the buttons beside it. Problems with one field stay at that field.
+ */
+export function SaveStatus(props) {
+  const settingsMessages = useSettingsMessages();
+  const state = () => read(props.state);
+  const text = () => {
+    const t = settingsMessages();
+    switch (state()) {
+      case "saved":
+        {
+          const at = props.savedAt === undefined ? undefined : read(props.savedAt);
+          return at ? t.statusSavedAt({
+            time: at
+          }) : t.statusSaved;
+        }
+      case "draft":
+        return t.statusDraft;
+      case "saving":
+        return t.saving;
+      case "failed":
+        return t.statusFailed;
+      case "invalid":
+        return t.statusInvalid({
+          count: props.invalidCount === undefined ? 1 : read(props.invalidCount)
+        });
+      case "unknown":
+        return t.statusUnknown;
+      case "readonly":
+        return t.statusReadOnly;
+    }
+  };
+  const hasActions = () => Boolean(props.onSave && props.onDiscard) && state() !== "readonly";
+  const pending = () => state() === "draft" || state() === "failed" || state() === "invalid" || state() === "saving";
+  return (() => {
+    var _el$76 = _$getNextElement(_tmpl$17),
+      _el$77 = _el$76.firstChild,
+      _el$78 = _el$77.firstChild,
+      _el$79 = _el$78.firstChild,
+      _el$80 = _el$79.nextSibling,
+      [_el$81, _co$17] = _$getNextMarker(_el$80.nextSibling),
+      _el$82 = _el$77.nextSibling,
+      [_el$83, _co$18] = _$getNextMarker(_el$82.nextSibling);
+    _$insert(_el$78, text, _el$81, _co$17);
+    _$insert(_el$76, _$createComponent(Show, {
+      get when() {
+        return hasActions();
+      },
+      get children() {
+        return _$createComponent(SettingsActions, {
+          changeCount: () => pending() ? 1 : 0,
+          loading: () => state() === "saving",
+          saveDisabled: () => state() === "invalid" || Boolean(props.saveDisabled !== undefined && read(props.saveDisabled)),
+          get onDiscard() {
+            return props.onDiscard;
+          },
+          get onSave() {
+            return props.onSave;
+          },
+          get saveLabel() {
+            return props.saveLabel ?? settingsMessages().save;
+          },
+          disableWithoutChanges: true
+        });
+      }
+    }), _el$83, _co$18);
+    _$effect(_p$ => {
+      var _v$5 = `k2b-save-status ${props.class ?? ""}`,
+        _v$6 = state(),
+        _v$7 = `${SAVE_STATUS_ICON[state()]}${state() === "saving" ? " k2b-spin" : ""}`;
+      _v$5 !== _p$.e && _$className(_el$76, _p$.e = _v$5);
+      _v$6 !== _p$.t && _$setAttribute(_el$78, "data-state", _p$.t = _v$6);
+      _v$7 !== _p$.a && _$className(_el$79, _p$.a = _v$7);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$76;
+  })();
+}
 //# sourceMappingURL=Settings.js.map