@sortsys/ui 0.1.6 → 0.1.7

package/dist/index.js

@@ -0,0 +1,2031 @@
+import { delegateEvents, template, insert, memo, effect, setAttribute, use, createComponent, addEventListener, className, spread, mergeProps, style, setStyleProperty, Portal } from 'solid-js/web';
+import { createContext, useContext, createSignal, onMount, onCleanup, createEffect, createUniqueId, For, untrack, createMemo, Show, createResource } from 'solid-js';
+import { useLocation, A, useNavigate } from '@solidjs/router';
+
+// src/components/SSButton.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<button>`);
+function SSButton(props) {
+  const classes = () => ["ss_button", props.isIconOnly ? "ss_button--icon" : "", props.class ?? ""].filter(Boolean).join(" ");
+  return (() => {
+    var _el$ = _tmpl$();
+    addEventListener(_el$, "click", props.onclick, true);
+    insert(_el$, () => props.children);
+    effect((_p$) => {
+      var _v$ = props.type ?? "button", _v$2 = classes(), _v$3 = props.disabled, _v$4 = props.ariaLabel, _v$5 = props.form;
+      _v$ !== _p$.e && setAttribute(_el$, "type", _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
+      _v$3 !== _p$.a && (_el$.disabled = _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$, "aria-label", _p$.o = _v$4);
+      _v$5 !== _p$.i && setAttribute(_el$, "form", _p$.i = _v$5);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    });
+    return _el$;
+  })();
+}
+delegateEvents(["click"]);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><span class=ss_callout__icon></span><div class=ss_callout__content><span>`);
+function SSCallout(props) {
+  const {
+    icon,
+    color,
+    class: className,
+    style,
+    children,
+    ...rest
+  } = props;
+  return (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+    spread(_el$, mergeProps(rest, {
+      "class": `ss_callout ss_callout--${color} ${className ?? ""}`,
+      "style": style
+    }), false, true);
+    insert(_el$2, icon);
+    insert(_el$4, children);
+    return _el$;
+  })();
+}
+var _tmpl$3 = /* @__PURE__ */ template(`<button type=button><span class=ss_chip__label>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<div><span class=ss_chip__label>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<button type=button class=ss_chip__dismiss aria-label=Entfernen><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M18 6l-12 12"></path><path d="M6 6l12 12">`);
+function SSChip(props) {
+  const commonClass = `ss_chip ss_chip--${props.color ?? "blue"} ${props.class ?? ""}`;
+  if ("onclick" in props && props.onclick) {
+    return (() => {
+      var _el$ = _tmpl$3(), _el$2 = _el$.firstChild;
+      addEventListener(_el$, "click", props.onclick, true);
+      className(_el$, `${commonClass} ss_chip--clickable`);
+      insert(_el$2, () => props.children);
+      effect((_$p) => style(_el$, props.style, _$p));
+      return _el$;
+    })();
+  }
+  return (() => {
+    var _el$3 = _tmpl$22(), _el$4 = _el$3.firstChild;
+    className(_el$3, commonClass);
+    insert(_el$4, () => props.children);
+    insert(_el$3, (() => {
+      var _c$ = memo(() => !!("ondismiss" in props && props.ondismiss));
+      return () => _c$() && (() => {
+        var _el$5 = _tmpl$32();
+        addEventListener(_el$5, "click", props.ondismiss, true);
+        return _el$5;
+      })();
+    })(), null);
+    effect((_$p) => style(_el$3, props.style, _$p));
+    return _el$3;
+  })();
+}
+delegateEvents(["click"]);
+var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<div class=ss_table__pagination><button type=button class=ss_table__page_button aria-label="Erste Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M7 6v12"></path><path d="M18 6l-6 6l6 6"></path></svg></button><button type=button class=ss_table__page_button aria-label="Vorherige Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M15 6l-6 6l6 6"></path></svg></button><span class=ss_table__page_info>Seite <!> von </span><button type=button class=ss_table__page_button aria-label="N\xE4chste Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></button><button type=button class=ss_table__page_button aria-label="Letzte Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 6l6 6l-6 6"></path><path d="M17 5v13">`);
+var _tmpl$33 = /* @__PURE__ */ template(`<div><div class=ss_table__scroll><table><thead><tr></tr></thead><tbody>`);
+var _tmpl$42 = /* @__PURE__ */ template(`<th>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<button type=button class=ss_table__sort_button><span class=ss_table__sort_icon aria-hidden=true>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
+var _tmpl$7 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-up"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 15l6 -6l6 6">`);
+var _tmpl$8 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-selector"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4">`);
+var _tmpl$9 = /* @__PURE__ */ template(`<span class=ss_table__header_label>`);
+var _tmpl$0 = /* @__PURE__ */ template(`<tr>`);
+var _tmpl$1 = /* @__PURE__ */ template(`<td>`);
+function SSDataCell(props) {
+  const rendered = createMemo(() => props.render(props.row));
+  const [asyncContent] = createResource(async () => {
+    const value = rendered();
+    if (value && typeof value.then === "function") {
+      return await value;
+    }
+    return null;
+  });
+  return (() => {
+    var _el$ = _tmpl$4();
+    insert(_el$, () => {
+      const value = rendered();
+      if (value && typeof value.then === "function") {
+        return asyncContent() ?? "";
+      }
+      return value;
+    });
+    return _el$;
+  })();
+}
+function SSDataTable(props) {
+  const [sortIndex, setSortIndex] = createSignal(-1);
+  const [sortDir, setSortDir] = createSignal(null);
+  const [page, setPage] = createSignal(1);
+  const pageSize = () => Math.max(1, props.pageSize ?? 25);
+  const sortedRows = createMemo(() => {
+    const index = sortIndex();
+    const dir = sortDir();
+    if (index < 0 || !dir) return props.rows;
+    const column = props.columns[index];
+    if (!column?.sortKey) return props.rows;
+    const entries = props.rows.map((row, idx) => ({
+      row,
+      idx,
+      key: column.sortKey(row)
+    }));
+    entries.sort((a, b) => {
+      if (a.key === b.key) return a.idx - b.idx;
+      if (a.key < b.key) return dir === "asc" ? -1 : 1;
+      return dir === "asc" ? 1 : -1;
+    });
+    return entries.map((entry) => entry.row);
+  });
+  const totalPages = createMemo(() => {
+    return Math.max(1, Math.ceil(sortedRows().length / pageSize()));
+  });
+  const pagedRows = createMemo(() => {
+    const current = Math.min(page(), totalPages());
+    const start = (current - 1) * pageSize();
+    return sortedRows().slice(start, start + pageSize());
+  });
+  createEffect(() => {
+    if (page() > totalPages()) setPage(totalPages());
+  });
+  const toggleSort = (index) => {
+    if (sortIndex() !== index) {
+      setSortIndex(index);
+      setSortDir("asc");
+      setPage(1);
+      return;
+    }
+    if (sortDir() === "asc") {
+      setSortDir("desc");
+      return;
+    }
+    if (sortDir() === "desc") {
+      setSortIndex(-1);
+      setSortDir(null);
+      setPage(1);
+      return;
+    }
+    setSortDir("asc");
+    setPage(1);
+  };
+  const goToPage = (next) => {
+    const safePage = Math.min(Math.max(1, next), totalPages());
+    setPage(safePage);
+  };
+  const paginationPosition = () => props.paginationPosition ?? "bottom";
+  const containerClass = () => `ss_table ${paginationPosition() === "top" ? "ss_table--pagination-top" : ""} ${props.class ?? ""}`;
+  const paginationBar = () => (() => {
+    var _el$2 = _tmpl$23(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling; _el$8.nextSibling; var _el$9 = _el$5.nextSibling, _el$0 = _el$9.nextSibling;
+    _el$3.$$click = () => goToPage(1);
+    _el$4.$$click = () => goToPage(page() - 1);
+    insert(_el$5, page, _el$8);
+    insert(_el$5, totalPages, null);
+    _el$9.$$click = () => goToPage(page() + 1);
+    _el$0.$$click = () => goToPage(totalPages());
+    effect((_p$) => {
+      var _v$ = page() === 1, _v$2 = page() === 1, _v$3 = page() === totalPages(), _v$4 = page() === totalPages();
+      _v$ !== _p$.e && (_el$3.disabled = _p$.e = _v$);
+      _v$2 !== _p$.t && (_el$4.disabled = _p$.t = _v$2);
+      _v$3 !== _p$.a && (_el$9.disabled = _p$.a = _v$3);
+      _v$4 !== _p$.o && (_el$0.disabled = _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    return _el$2;
+  })();
+  return (() => {
+    var _el$1 = _tmpl$33(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling;
+    insert(_el$1, (() => {
+      var _c$ = memo(() => paginationPosition() === "top");
+      return () => _c$() && paginationBar();
+    })(), _el$10);
+    insert(_el$13, createComponent(For, {
+      get each() {
+        return props.columns;
+      },
+      children: (column, index) => {
+        const sortable = !!column.sortKey;
+        const isActive = () => sortIndex() === index();
+        const currentDir = () => isActive() ? sortDir() : null;
+        return (() => {
+          var _el$15 = _tmpl$42();
+          insert(_el$15, sortable ? (() => {
+            var _el$16 = _tmpl$5(), _el$17 = _el$16.firstChild;
+            _el$16.$$click = () => toggleSort(index());
+            insert(_el$16, () => column.label, _el$17);
+            insert(_el$17, (() => {
+              var _c$3 = memo(() => currentDir() === "asc");
+              return () => _c$3() ? _tmpl$6() : memo(() => currentDir() === "desc")() ? _tmpl$7() : _tmpl$8();
+            })());
+            effect((_p$) => {
+              var _v$7 = currentDir() === "asc" ? "ascending" : currentDir() === "desc" ? "descending" : "none", _v$8 = currentDir() ?? "none";
+              _v$7 !== _p$.e && setAttribute(_el$16, "aria-sort", _p$.e = _v$7);
+              _v$8 !== _p$.t && setAttribute(_el$16, "data-sort", _p$.t = _v$8);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$16;
+          })() : (() => {
+            var _el$21 = _tmpl$9();
+            insert(_el$21, () => column.label);
+            return _el$21;
+          })());
+          return _el$15;
+        })();
+      }
+    }));
+    insert(_el$14, createComponent(For, {
+      get each() {
+        return pagedRows();
+      },
+      children: (row) => (() => {
+        var _el$22 = _tmpl$0();
+        _el$22.$$click = () => props.onRowClick?.(row);
+        insert(_el$22, createComponent(For, {
+          get each() {
+            return props.columns;
+          },
+          children: (column) => (() => {
+            var _el$23 = _tmpl$1();
+            insert(_el$23, createComponent(SSDataCell, {
+              row,
+              get render() {
+                return column.render;
+              }
+            }));
+            return _el$23;
+          })()
+        }));
+        effect(() => setAttribute(_el$22, "data-clickable", props.onRowClick ? "true" : void 0));
+        return _el$22;
+      })()
+    }));
+    insert(_el$1, (() => {
+      var _c$2 = memo(() => paginationPosition() === "bottom");
+      return () => _c$2() && paginationBar();
+    })(), null);
+    effect((_p$) => {
+      var _v$5 = containerClass(), _v$6 = props.style;
+      _v$5 !== _p$.e && className(_el$1, _p$.e = _v$5);
+      _p$.t = style(_el$1, _v$6, _p$.t);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$1;
+  })();
+}
+delegateEvents(["click"]);
+var _tmpl$10 = /* @__PURE__ */ template(`<div class=ss_dropdown__menu role=menu>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<div><button type=button class="ss_dropdown__trigger ss_button ss_button--icon"aria-haspopup=menu>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0">`);
+var _tmpl$43 = /* @__PURE__ */ template(`<button type=button class=ss_dropdown__item><span class=ss_dropdown__item_icon></span><span class=ss_dropdown__item_label>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<span class=ss_dropdown__item_check aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-check"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M5 12l5 5l10 -10">`);
+function SSDropdown(props) {
+  const [open, setOpen] = createSignal(false);
+  const [renderMenu, setRenderMenu] = createSignal(false);
+  const [menuState, setMenuState] = createSignal("closed");
+  let rootRef;
+  const close = () => setOpen(false);
+  createEffect(() => {
+    if (open()) {
+      setRenderMenu(true);
+      requestAnimationFrame(() => setMenuState("open"));
+      return;
+    }
+    if (!renderMenu()) return;
+    setMenuState("closed");
+    const timeout = window.setTimeout(() => setRenderMenu(false), 160);
+    onCleanup(() => window.clearTimeout(timeout));
+  });
+  onMount(() => {
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!rootRef || !target) return;
+      if (!rootRef.contains(target)) close();
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") close();
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      window.removeEventListener("keydown", handleKeyDown);
+    });
+  });
+  return (() => {
+    var _el$ = _tmpl$24(), _el$2 = _el$.firstChild;
+    use((el) => rootRef = el, _el$);
+    _el$2.$$click = () => setOpen((value) => !value);
+    insert(_el$2, () => props.icon ?? _tmpl$34());
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return renderMenu();
+      },
+      get children() {
+        var _el$3 = _tmpl$10();
+        insert(_el$3, createComponent(For, {
+          get each() {
+            return props.items;
+          },
+          children: (item) => (() => {
+            var _el$5 = _tmpl$43(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+            _el$5.$$click = async () => {
+              close();
+              await item.onclick?.();
+            };
+            insert(_el$6, () => item.icon);
+            insert(_el$7, () => item.label);
+            insert(_el$5, (() => {
+              var _c$ = memo(() => !!item.checked);
+              return () => _c$() && _tmpl$52();
+            })(), null);
+            effect((_p$) => {
+              var _v$5 = item.checked ? "menuitemcheckbox" : "menuitem", _v$6 = item.checked ? "true" : void 0;
+              _v$5 !== _p$.e && setAttribute(_el$5, "role", _p$.e = _v$5);
+              _v$6 !== _p$.t && setAttribute(_el$5, "aria-checked", _p$.t = _v$6);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$5;
+          })()
+        }));
+        effect(() => setAttribute(_el$3, "data-state", menuState()));
+        return _el$3;
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$ = `ss_dropdown ${props.class ?? ""}`, _v$2 = props.style, _v$3 = open(), _v$4 = props.ariaLabel ?? "Aktionen \xF6ffnen";
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && setAttribute(_el$2, "aria-expanded", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$2, "aria-label", _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    return _el$;
+  })();
+}
+delegateEvents(["click"]);
+var _tmpl$11 = /* @__PURE__ */ template(`<div><div class=ss_expandable__header role=button tabindex=0><span class=ss_expandable__icon aria-hidden=true></span><span class=ss_expandable__title></span></div><div class=ss_expandable__content style=transition-duration:200ms><div class=ss_expandable__divider_wrapper><div class=ss_expandable__divider>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
+var _tmpl$35 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6">`);
+var TRANSITION_MS = 200;
+function SSExpandable(props) {
+  const [height, setHeight] = createSignal(props.initiallyExpanded ? "auto" : 0);
+  const isExpanded = createMemo(() => height() !== 0);
+  let contentRef;
+  let timeoutId;
+  const toggle = () => {
+    if (timeoutId) clearTimeout(timeoutId);
+    const targetHeight = contentRef?.scrollHeight ?? 0;
+    if (isExpanded()) {
+      setHeight(targetHeight);
+      timeoutId = window.setTimeout(() => setHeight(0), 1);
+      return;
+    }
+    setHeight(targetHeight);
+    timeoutId = window.setTimeout(() => setHeight("auto"), TRANSITION_MS);
+  };
+  onCleanup(() => {
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+  return (() => {
+    var _el$ = _tmpl$11(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild; _el$6.firstChild;
+    _el$2.$$keydown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        toggle();
+      }
+    };
+    _el$2.$$click = toggle;
+    insert(_el$3, (() => {
+      var _c$ = memo(() => !!isExpanded());
+      return () => _c$() ? _tmpl$25() : _tmpl$35();
+    })());
+    insert(_el$4, () => props.title);
+    use((el) => contentRef = el, _el$5);
+    insert(_el$6, () => props.children, null);
+    effect((_p$) => {
+      var _v$ = `ss_expandable ${props.class ?? ""}`, _v$2 = props.style, _v$3 = isExpanded() ? "open" : "closed", _v$4 = isExpanded(), _v$5 = typeof height() === "number" ? `${height()}px` : height();
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && setAttribute(_el$, "data-state", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$2, "aria-expanded", _p$.o = _v$4);
+      _v$5 !== _p$.i && setStyleProperty(_el$5, "height", _p$.i = _v$5);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    });
+    return _el$;
+  })();
+}
+delegateEvents(["click", "keydown"]);
+function createLoading() {
+  const [loading, setLoading] = createSignal(false);
+  return [loading, async (callback) => {
+    if (loading()) return;
+    try {
+      setLoading(true);
+      await callback();
+    } finally {
+      setLoading(false);
+    }
+  }];
+}
+
+// src/components/SSForm.tsx
+var _tmpl$12 = /* @__PURE__ */ template(`<form class=ss_form>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<div class=ss_form_input><label></label><div class=ss__wrapper>`);
+var _tmpl$36 = /* @__PURE__ */ template(`<textarea>`);
+var _tmpl$44 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$53 = /* @__PURE__ */ template(`<ul class=ss__suggestions>`);
+var _tmpl$62 = /* @__PURE__ */ template(`<li>`);
+var _tmpl$72 = /* @__PURE__ */ template(`<span role=alert>`);
+var _tmpl$82 = /* @__PURE__ */ template(`<div class=ss_form_date><label></label><div class=ss__wrapper><input type=text inputmode=numeric autocomplete=off placeholder=TT.MM.JJJJ><button type=button class=ss_form_date__icon aria-label="Kalender \xF6ffnen"aria-haspopup=dialog><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=currentColor class="icon icon-tabler icons-tabler-filled icon-tabler-calendar-week"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M16 2c.183 0 .355 .05 .502 .135l.033 .02c.28 .177 .465 .49 .465 .845v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 .514 -.874l.093 -.046l.066 -.025l.1 -.029l.107 -.019l.12 -.007q .083 0 .161 .013l.122 .029l.04 .012l.06 .023c.328 .135 .568 .44 .61 .806l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z"></path><path d="M9.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1"></path><path d="M13.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1"></path><path d="M17.02 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1"></path><path d="M12.02 15a1 1 0 0 1 0 2a1.001 1.001 0 1 1 -.005 -2z"></path><path d="M9.015 16a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1">`);
+var _tmpl$92 = /* @__PURE__ */ template(`<div class=ss_form_date__picker role=dialog aria-label="Datum ausw\xE4hlen"><div class=ss_form_date__header><div class=ss_form_date__nav_group><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M7 6v12"></path><path d="M18 6l-6 6l6 6"></path></svg></button><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M15 6l-6 6l6 6"></path></svg></button></div><div class=ss_form_date__title></div><div class=ss_form_date__nav_group><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></button><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 6l6 6l-6 6"></path><path d="M17 5v13"></path></svg></button></div></div><div class=ss_form_date__weekdays></div><div class=ss_form_date__grid>`);
+var _tmpl$02 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<button type=button class=ss_form_date__day>`);
+var _tmpl$102 = /* @__PURE__ */ template(`<span class="ss_form_date__day is-empty">`);
+var _tmpl$112 = /* @__PURE__ */ template(`<div class=ss_form_checkbox><div class=ss__wrapper><input type=checkbox><label>`);
+var _tmpl$122 = /* @__PURE__ */ template(`<div class=ss_form_select><label></label><div class=ss_form_select__field><select></select><span class=ss_form_select__icon aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
+var _tmpl$132 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<div class=ss_form_ac_select><label>`);
+var _tmpl$15 = /* @__PURE__ */ template(`<div class=ss__selection><div class=ss__content></div><button type=button class=ss__clear aria-label="Auswahl entfernen">\xD7`);
+var _tmpl$16 = /* @__PURE__ */ template(`<div class=ss__wrapper><div class=ss__input_row><input>`);
+var _tmpl$17 = /* @__PURE__ */ template(`<span class=ss__prefix role=button>`);
+var _tmpl$18 = /* @__PURE__ */ template(`<div>`);
+var SSFormContext = createContext();
+var SSForm = function(props) {
+  const [loading, process] = createLoading();
+  const fields = {};
+  const context = {
+    loading,
+    process: (action) => process(() => action(context)),
+    field: (name) => fields[name] ?? null,
+    setField: (name, field) => {
+      fields[name] = field;
+    },
+    delField: (name) => {
+      delete fields[name];
+    },
+    setValues: (values) => Object.entries(values).forEach(([name, value]) => fields[name]?.setValue(value)),
+    getValues: async () => {
+      const entries = Object.entries(fields);
+      const values = await Promise.all(entries.map(([, field]) => field.getValue()));
+      return Object.fromEntries(entries.map(([name], i) => [name, values[i]]));
+    },
+    validate: () => Promise.all(Object.values(fields).map((field) => field.validate())).then(),
+    hasError: () => Object.values(fields).some((field) => field.hasError()),
+    submit: () => process(async () => {
+      await context.validate();
+      if (context.hasError()) return;
+      await props.onsubmit?.(context);
+    })
+  };
+  return (() => {
+    var _el$ = _tmpl$12();
+    _el$.addEventListener("submit", (e) => {
+      e.preventDefault();
+      context.submit();
+    });
+    insert(_el$, createComponent(SSFormContext.Provider, {
+      value: context,
+      get children() {
+        return props.children;
+      }
+    }));
+    return _el$;
+  })();
+};
+SSForm.Input = function(props) {
+  const context = useContext(SSFormContext);
+  const [value, setValue] = createSignal("");
+  const [error, setError] = createSignal(null);
+  const field = {
+    getValue: () => {
+      const trimmed = value().trim();
+      if (!trimmed) return null;
+      return trimmed;
+    },
+    setValue: (value2) => {
+      if (typeof value2 === "number") {
+        setValue(value2.toLocaleString());
+        return;
+      }
+      setValue(`${value2}`);
+    },
+    hasError: () => !!error(),
+    validate: async () => {
+      const rules = [...props.rules ?? []];
+      if (props.required) rules.unshift(SSForm.rules.required);
+      const value2 = await field.getValue();
+      for (const rule of rules) {
+        const newError = await rule(value2);
+        if (newError) {
+          setError(newError);
+          return;
+        }
+      }
+      setError(null);
+    }
+  };
+  if (props.name && context) {
+    const name = props.name;
+    onMount(() => context.setField(name, field));
+    onCleanup(() => context.delField(name));
+  }
+  let suggInitData = null;
+  const [suggItems, setSuggItems] = createSignal([]);
+  const [suggIndex, setSuggIndex] = createSignal(-1);
+  let suggListRef;
+  if (props.suggestions) {
+    const sugg = props.suggestions;
+    const [initialized, setInitialized] = createSignal(!sugg.prepare);
+    if (sugg.prepare) onMount(async () => {
+      if (!sugg.prepare) return;
+      suggInitData = await sugg.prepare();
+      setInitialized(true);
+    });
+    let timeout;
+    createEffect(() => {
+      clearTimeout(timeout ?? void 0);
+      if (!initialized()) return;
+      setSuggItems([]);
+      const query = value().trim().toLowerCase();
+      if (!query) return;
+      timeout = setTimeout(async () => {
+        const items = await sugg.getItems({
+          query,
+          init: suggInitData
+        });
+        setSuggItems(items);
+      }, 250);
+    });
+    onCleanup(() => clearTimeout(timeout ?? void 0));
+  }
+  createEffect(() => {
+    const items = suggItems();
+    if (!items.length) {
+      setSuggIndex(-1);
+      return;
+    }
+    if (suggIndex() >= items.length) setSuggIndex(items.length - 1);
+  });
+  const scrollToIndex = (idx) => {
+    const list = suggListRef;
+    if (!list || idx < 0) return;
+    const item = list.querySelectorAll("li")[idx];
+    if (!item) return;
+    const itemTop = item.offsetTop;
+    const itemBottom = itemTop + item.offsetHeight;
+    const viewTop = list.scrollTop;
+    const viewBottom = viewTop + list.clientHeight;
+    if (itemTop < viewTop) list.scrollTop = itemTop;
+    else if (itemBottom > viewBottom) list.scrollTop = itemBottom - list.clientHeight;
+  };
+  const moveIndex = (delta) => {
+    const items = suggItems();
+    if (!items.length) return;
+    const next = Math.max(-1, Math.min(suggIndex() + delta, items.length - 1));
+    setSuggIndex(next);
+    scrollToIndex(next);
+  };
+  const selectSuggestion = (item) => {
+    setValue(props.suggestions.stringify({
+      item,
+      init: suggInitData
+    }));
+    setSuggIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    if (!suggItems().length) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      moveIndex(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      moveIndex(-1);
+    } else if (e.key === "Enter" && suggIndex() >= 0) {
+      e.preventDefault();
+      const item = suggItems()[suggIndex()];
+      if (item) selectSuggestion(item);
+    } else if (e.key === "Escape") {
+      setSuggIndex(-1);
+    }
+  };
+  const handleInputChange = (next) => {
+    setValue(next);
+    setSuggIndex(-1);
+  };
+  const _id = createUniqueId();
+  return (() => {
+    var _el$2 = _tmpl$26(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+    insert(_el$3, () => props.label);
+    insert(_el$4, (() => {
+      var _c$ = memo(() => !!props.textArea);
+      return () => _c$() ? (() => {
+        var _el$5 = _tmpl$36();
+        _el$5.$$keydown = handleKeyDown;
+        _el$5.$$input = (e) => handleInputChange(e.target.value);
+        effect((_p$) => {
+          var _v$ = props.id || _id, _v$2 = props.disabled || context?.loading();
+          _v$ !== _p$.e && setAttribute(_el$5, "id", _p$.e = _v$);
+          _v$2 !== _p$.t && (_el$5.disabled = _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        effect(() => _el$5.value = value());
+        return _el$5;
+      })() : (() => {
+        var _el$6 = _tmpl$44();
+        _el$6.$$keydown = handleKeyDown;
+        _el$6.$$input = (e) => handleInputChange(e.target.value);
+        effect((_p$) => {
+          var _v$3 = props.id || _id, _v$4 = props.disabled || context?.loading(), _v$5 = props.type;
+          _v$3 !== _p$.e && setAttribute(_el$6, "id", _p$.e = _v$3);
+          _v$4 !== _p$.t && (_el$6.disabled = _p$.t = _v$4);
+          _v$5 !== _p$.a && setAttribute(_el$6, "type", _p$.a = _v$5);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        effect(() => _el$6.value = value());
+        return _el$6;
+      })();
+    })(), null);
+    insert(_el$4, (() => {
+      var _c$2 = memo(() => !!!!suggItems().length);
+      return () => _c$2() && (() => {
+        var _el$7 = _tmpl$53();
+        use((el) => suggListRef = el, _el$7);
+        insert(_el$7, createComponent(For, {
+          get each() {
+            return suggItems();
+          },
+          children: (item, idx) => {
+            const handleSelect = () => {
+              const active = document.activeElement;
+              if (active instanceof HTMLElement) active.blur();
+              selectSuggestion(item);
+            };
+            return (() => {
+              var _el$8 = _tmpl$62();
+              _el$8.$$click = handleSelect;
+              _el$8.$$pointerdown = (e) => e.preventDefault();
+              insert(_el$8, () => props.suggestions.stringify({
+                item,
+                init: suggInitData
+              }));
+              effect(() => _el$8.classList.toggle("ss__hovered", !!(idx() === suggIndex())));
+              return _el$8;
+            })();
+          }
+        }));
+        return _el$7;
+      })();
+    })(), null);
+    insert(_el$2, (() => {
+      var _c$3 = memo(() => !!!!error());
+      return () => _c$3() && (() => {
+        var _el$9 = _tmpl$72();
+        insert(_el$9, error);
+        return _el$9;
+      })();
+    })(), null);
+    effect(() => setAttribute(_el$3, "for", props.id || _id));
+    return _el$2;
+  })();
+};
+SSForm.Date = function(props) {
+  const context = useContext(SSFormContext);
+  const [value, setValue] = createSignal("");
+  const [error, setError] = createSignal(null);
+  const [open, setOpen] = createSignal(false);
+  const [viewDate, setViewDate] = createSignal(/* @__PURE__ */ new Date());
+  let containerRef;
+  const pad = (num) => `${num}`.padStart(2, "0");
+  const formatDate = (date) => {
+    const day = pad(date.getDate());
+    const month = pad(date.getMonth() + 1);
+    const year = date.getFullYear();
+    return `${day}.${month}.${year}`;
+  };
+  const parseDate = (input) => {
+    const trimmed = input.trim();
+    if (!trimmed) return null;
+    const match = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/.exec(trimmed);
+    if (!match) return null;
+    const day = Number(match[1]);
+    const month = Number(match[2]);
+    const year = Number(match[3]);
+    if (!day || !month) return null;
+    const date = new Date(year, month - 1, day);
+    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+      return null;
+    }
+    return date;
+  };
+  createEffect(() => {
+    if (!open()) return;
+    const parsed = parseDate(value());
+    setViewDate(parsed ?? /* @__PURE__ */ new Date());
+  });
+  const field = {
+    getValue: () => {
+      const trimmed = value().trim();
+      if (!trimmed) return null;
+      return trimmed;
+    },
+    setValue: (value2) => {
+      if (value2 instanceof Date) {
+        setValue(formatDate(value2));
+        return;
+      }
+      setValue(`${value2 ?? ""}`);
+    },
+    hasError: () => !!error(),
+    validate: async () => {
+      const rules = [...props.rules ?? []];
+      if (props.required) rules.unshift(SSForm.rules.required);
+      const value2 = await field.getValue();
+      for (const rule of rules) {
+        const newError = await rule(value2);
+        if (newError) {
+          setError(newError);
+          return;
+        }
+      }
+      if (value2 && !parseDate(value2)) {
+        setError("Ung\xFCltiges Datum");
+        return;
+      }
+      setError(null);
+    }
+  };
+  if (props.name && context) {
+    const name = props.name;
+    onMount(() => context.setField(name, field));
+    onCleanup(() => context.delField(name));
+  }
+  const _id = createUniqueId();
+  const isSelected = (day) => {
+    const parsed = parseDate(value());
+    if (!parsed) return false;
+    return parsed.getFullYear() === viewDate().getFullYear() && parsed.getMonth() === viewDate().getMonth() && parsed.getDate() === day;
+  };
+  const isToday = (day) => {
+    const today = /* @__PURE__ */ new Date();
+    return today.getFullYear() === viewDate().getFullYear() && today.getMonth() === viewDate().getMonth() && today.getDate() === day;
+  };
+  const buildCalendar = () => {
+    const current = viewDate();
+    const year = current.getFullYear();
+    const month = current.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const startOffset = (firstDay.getDay() + 6) % 7;
+    const cells = [];
+    for (let i = 0; i < startOffset; i += 1) cells.push(null);
+    for (let day = 1; day <= daysInMonth; day += 1) cells.push(day);
+    while (cells.length % 7 !== 0) cells.push(null);
+    return cells;
+  };
+  const monthLabel = () => {
+    return viewDate().toLocaleDateString("de-DE", {
+      month: "long",
+      year: "numeric"
+    });
+  };
+  const handleSelect = (day) => {
+    const next = new Date(viewDate().getFullYear(), viewDate().getMonth(), day);
+    setValue(formatDate(next));
+    setOpen(false);
+  };
+  onMount(() => {
+    const handleOutside = (event) => {
+      if (!open()) return;
+      const target = event.target;
+      if (containerRef && target && !containerRef.contains(target)) {
+        setOpen(false);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", handleOutside);
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => {
+      document.removeEventListener("mousedown", handleOutside);
+      window.removeEventListener("keydown", handleKeyDown);
+    });
+  });
+  return (() => {
+    var _el$0 = _tmpl$82(), _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling;
+    use((el) => containerRef = el, _el$0);
+    insert(_el$1, () => props.label);
+    _el$11.addEventListener("focus", () => setOpen(true));
+    _el$11.$$input = (e) => setValue(e.target.value);
+    _el$12.$$click = () => setOpen((value2) => !value2);
+    insert(_el$0, (() => {
+      var _c$4 = memo(() => !!open());
+      return () => _c$4() && (() => {
+        var _el$13 = _tmpl$92(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.nextSibling, _el$18 = _el$15.nextSibling, _el$19 = _el$18.nextSibling, _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling, _el$22 = _el$14.nextSibling, _el$23 = _el$22.nextSibling;
+        _el$16.$$click = () => {
+          const current = viewDate();
+          setViewDate(new Date(current.getFullYear() - 1, current.getMonth(), 1));
+        };
+        _el$17.$$click = () => {
+          const current = viewDate();
+          setViewDate(new Date(current.getFullYear(), current.getMonth() - 1, 1));
+        };
+        insert(_el$18, monthLabel);
+        _el$20.$$click = () => {
+          const current = viewDate();
+          setViewDate(new Date(current.getFullYear(), current.getMonth() + 1, 1));
+        };
+        _el$21.$$click = () => {
+          const current = viewDate();
+          setViewDate(new Date(current.getFullYear() + 1, current.getMonth(), 1));
+        };
+        insert(_el$22, () => ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"].map((day) => (() => {
+          var _el$24 = _tmpl$02();
+          insert(_el$24, day);
+          return _el$24;
+        })()));
+        insert(_el$23, () => buildCalendar().map((day) => day ? (() => {
+          var _el$25 = _tmpl$13();
+          _el$25.$$click = () => handleSelect(day);
+          insert(_el$25, day);
+          effect((_p$) => {
+            var _v$10 = !!isSelected(day), _v$11 = !!isToday(day);
+            _v$10 !== _p$.e && _el$25.classList.toggle("is-selected", _p$.e = _v$10);
+            _v$11 !== _p$.t && _el$25.classList.toggle("is-today", _p$.t = _v$11);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0
+          });
+          return _el$25;
+        })() : _tmpl$102()));
+        return _el$13;
+      })();
+    })(), null);
+    insert(_el$0, (() => {
+      var _c$5 = memo(() => !!!!error());
+      return () => _c$5() && (() => {
+        var _el$27 = _tmpl$72();
+        insert(_el$27, error);
+        return _el$27;
+      })();
+    })(), null);
+    effect((_p$) => {
+      var _v$6 = props.id || _id, _v$7 = props.id || _id, _v$8 = props.disabled || context?.loading(), _v$9 = !props.editable, _v$0 = open(), _v$1 = props.disabled || context?.loading();
+      _v$6 !== _p$.e && setAttribute(_el$1, "for", _p$.e = _v$6);
+      _v$7 !== _p$.t && setAttribute(_el$11, "id", _p$.t = _v$7);
+      _v$8 !== _p$.a && (_el$11.disabled = _p$.a = _v$8);
+      _v$9 !== _p$.o && (_el$11.readOnly = _p$.o = _v$9);
+      _v$0 !== _p$.i && setAttribute(_el$12, "aria-expanded", _p$.i = _v$0);
+      _v$1 !== _p$.n && (_el$12.disabled = _p$.n = _v$1);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    });
+    effect(() => _el$11.value = value());
+    return _el$0;
+  })();
+};
+SSForm.Checkbox = function(props) {
+  const context = useContext(SSFormContext);
+  const [value, setValue] = createSignal(false);
+  const [error, setError] = createSignal(null);
+  const field = {
+    getValue: () => value(),
+    setValue: (value2) => setValue(!!value2),
+    hasError: () => !!error(),
+    validate: async () => {
+      const rules = [...props.rules ?? []];
+      if (props.required) rules.unshift(SSForm.rules.required);
+      const value2 = await field.getValue();
+      for (const rule of rules) {
+        const newError = await rule(value2);
+        if (newError) {
+          setError(newError);
+          return;
+        }
+      }
+      setError(null);
+    }
+  };
+  if (props.name && context) {
+    const name = props.name;
+    onMount(() => context.setField(name, field));
+    onCleanup(() => context.delField(name));
+  }
+  const _id = createUniqueId();
+  return (() => {
+    var _el$28 = _tmpl$112(), _el$29 = _el$28.firstChild, _el$30 = _el$29.firstChild, _el$31 = _el$30.nextSibling;
+    _el$30.addEventListener("change", (e) => setValue(e.target.checked));
+    insert(_el$31, () => props.label);
+    insert(_el$28, (() => {
+      var _c$6 = memo(() => !!!!error());
+      return () => _c$6() && (() => {
+        var _el$32 = _tmpl$72();
+        insert(_el$32, error);
+        return _el$32;
+      })();
+    })(), null);
+    effect((_p$) => {
+      var _v$12 = props.id || _id, _v$13 = props.disabled || context?.loading(), _v$14 = props.id || _id;
+      _v$12 !== _p$.e && setAttribute(_el$30, "id", _p$.e = _v$12);
+      _v$13 !== _p$.t && (_el$30.disabled = _p$.t = _v$13);
+      _v$14 !== _p$.a && setAttribute(_el$31, "for", _p$.a = _v$14);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    effect(() => _el$30.checked = value());
+    return _el$28;
+  })();
+};
+SSForm.useContext = function() {
+  const context = useContext(SSFormContext);
+  if (!context) return null;
+  const {
+    setField,
+    delField,
+    ...publicContext
+  } = context;
+  return publicContext;
+};
+SSForm.Select = function(props) {
+  const context = useContext(SSFormContext);
+  const [options, setOptions] = createSignal([]);
+  const [value, setValue] = createSignal(null);
+  const [error, setError] = createSignal(null);
+  const handleSetOptions = (result) => {
+    const built = result.map((opt) => ({
+      id: opt.id,
+      label: props.buildOption(opt)
+    }));
+    setOptions(built);
+    if (!result.length) {
+      setValue(null);
+      return;
+    }
+    if (value() && built.some((e) => e.id === value())) return;
+    setValue(built[0].id);
+  };
+  createEffect(() => {
+    const newOptions = props.getOptions();
+    if ("then" in newOptions && typeof newOptions.then === "function" || newOptions instanceof Promise) {
+      newOptions.then(handleSetOptions);
+    } else {
+      handleSetOptions(newOptions);
+    }
+  });
+  const field = {
+    getValue: () => {
+      const _value = value();
+      const availableOptions = options();
+      if (!availableOptions.some((e) => e.id === _value)) {
+        return null;
+      }
+      return _value;
+    },
+    setValue: (newValue) => {
+      const availableOptions = options();
+      if (!availableOptions.length) {
+        setValue(null);
+        return;
+      }
+      const defaultOption = availableOptions[0].id;
+      if (typeof newValue !== "string") {
+        setValue(defaultOption);
+        return;
+      }
+      const _newValue = newValue.trim();
+      if (!availableOptions.some((e) => e.id === _newValue)) {
+        setValue(defaultOption);
+        return;
+      }
+      setValue(_newValue);
+    },
+    hasError: () => !!error(),
+    validate: async () => {
+      const availableOptions = options();
+      const value2 = await field.getValue();
+      if (!value2) {
+        setError("Pflichtfeld");
+        return;
+      }
+      if (!availableOptions.some((e) => e.id === value2)) {
+        setError("Option nicht verf\xFCgbar");
+        return;
+      }
+      for (const rule of props.rules ?? []) {
+        const err = await rule(value2);
+        if (err) {
+          setError(err);
+          return;
+        }
+      }
+      setError(null);
+    }
+  };
+  field.setOptions = handleSetOptions;
+  if (props.name && context) {
+    const name = props.name;
+    onMount(() => context.setField(name, field));
+    onCleanup(() => context.delField(name));
+  }
+  const _id = createUniqueId();
+  return (() => {
+    var _el$33 = _tmpl$122(), _el$34 = _el$33.firstChild, _el$35 = _el$34.nextSibling, _el$36 = _el$35.firstChild;
+    insert(_el$34, () => props.label);
+    _el$36.addEventListener("change", (e) => setValue(e.target.value));
+    insert(_el$36, createComponent(For, {
+      get each() {
+        return options();
+      },
+      children: (opt) => (() => {
+        var _el$37 = _tmpl$132();
+        insert(_el$37, () => opt.label);
+        effect(() => _el$37.selected = value() === opt.id);
+        effect(() => _el$37.value = opt.id);
+        return _el$37;
+      })()
+    }));
+    insert(_el$33, (() => {
+      var _c$7 = memo(() => !!!!error());
+      return () => _c$7() && (() => {
+        var _el$38 = _tmpl$72();
+        insert(_el$38, error);
+        return _el$38;
+      })();
+    })(), null);
+    effect((_p$) => {
+      var _v$15 = props.id || _id, _v$16 = props.id || _id, _v$17 = props.disabled || context?.loading();
+      _v$15 !== _p$.e && setAttribute(_el$34, "for", _p$.e = _v$15);
+      _v$16 !== _p$.t && setAttribute(_el$36, "id", _p$.t = _v$16);
+      _v$17 !== _p$.a && (_el$36.disabled = _p$.a = _v$17);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    return _el$33;
+  })();
+};
+SSForm.ACSelect = function(props) {
+  const context = useContext(SSFormContext);
+  const [query, setQuery] = createSignal("");
+  const [value, setValue] = createSignal([]);
+  const [error, setError] = createSignal(null);
+  const field = {
+    getValue: () => value(),
+    setValue: (newValue) => setValue(newValue),
+    hasError: () => !!error(),
+    validate: async () => {
+      const value2 = await field.getValue();
+      const min = props.minSelectedItems;
+      const max = props.maxSelectedItems;
+      if (min) {
+        if (value2.length < min) {
+          setError(`Mindestens ${min} ${min > 1 ? "Elemente m\xFCssen" : "Element muss"} ausgew\xE4hlt werden`);
+          return;
+        }
+      }
+      if (max) {
+        if (value2.length > max) {
+          setError(`Maximal ${max} ${max > 1 ? "Elemente d\xFCrfen" : "Element darf"} ausgew\xE4hlt werden`);
+          return;
+        }
+      }
+      for (const rule of props.rules ?? []) {
+        const err = await rule(value2);
+        if (err) {
+          setError(err);
+          return;
+        }
+      }
+      setError(null);
+    }
+  };
+  if (props.name && context) {
+    const name = props.name;
+    onMount(() => context.setField(name, field));
+    onCleanup(() => context.delField(name));
+  }
+  let initData = null;
+  const [initialized, setInitialized] = createSignal(!props.prepare);
+  if (props.prepare) onMount(async () => {
+    if (!props.prepare) return;
+    initData = await props.prepare();
+    setInitialized(true);
+  });
+  const [suggItems, setSuggItems] = createSignal([]);
+  const [suggIndex, setSuggIndex] = createSignal(-1);
+  let suggListRef;
+  let timeout;
+  createEffect(() => {
+    if (!initialized()) return;
+    clearTimeout(timeout);
+    const _query = query().trim().toLowerCase();
+    if (!_query) {
+      setSuggItems(untrack(() => value()));
+      return;
+    }
+    setSuggItems([]);
+    timeout = setTimeout(async () => {
+      const items = await props.getOptions({
+        query: _query,
+        init: initData
+      });
+      setSuggItems(items);
+    }, 250);
+  });
+  createEffect(() => {
+    const _query = query().trim().toLowerCase();
+    if (_query) return;
+    if (suggItems().length !== value().length) setSuggItems(value());
+  });
+  onCleanup(() => clearTimeout(timeout));
+  createEffect(() => {
+    const items = suggItems();
+    if (!items.length) {
+      setSuggIndex(-1);
+      return;
+    }
+    if (suggIndex() >= items.length) setSuggIndex(items.length - 1);
+  });
+  const scrollToIndex = (idx) => {
+    const list = suggListRef;
+    if (!list || idx < 0) return;
+    const item = list.querySelectorAll("li")[idx];
+    if (!item) return;
+    const itemTop = item.offsetTop;
+    const itemBottom = itemTop + item.offsetHeight;
+    const viewTop = list.scrollTop;
+    const viewBottom = viewTop + list.clientHeight;
+    if (itemTop < viewTop) list.scrollTop = itemTop;
+    else if (itemBottom > viewBottom) list.scrollTop = itemBottom - list.clientHeight;
+  };
+  const moveIndex = (delta) => {
+    const items = suggItems();
+    if (!items.length) return;
+    const next = Math.max(-1, Math.min(suggIndex() + delta, items.length - 1));
+    setSuggIndex(next);
+    scrollToIndex(next);
+  };
+  const _id = createUniqueId();
+  const selectedIds = createMemo(() => {
+    return new Set(value().map(({
+      id
+    }) => id));
+  });
+  const selectItem = (item, resetIndex = true) => {
+    const isSelected = selectedIds().has(item.id);
+    if (props.maxSelectedItems === 1) {
+      setValue(isSelected ? [] : [item]);
+      setQuery("");
+      if (resetIndex) setSuggIndex(-1);
+      return;
+    }
+    if (isSelected) {
+      setValue((value2) => value2.filter(({
+        id
+      }) => id !== item.id));
+    } else {
+      setValue((value2) => [...value2.filter(({
+        id
+      }) => id !== item.id), item]);
+    }
+    if (resetIndex) setSuggIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    if (!suggItems().length) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      moveIndex(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      moveIndex(-1);
+    } else if (e.key === "Enter" && suggIndex() >= 0) {
+      e.preventDefault();
+      const item = suggItems()[suggIndex()];
+      if (item) selectItem(item, false);
+    } else if (e.key === "Escape") {
+      setSuggIndex(-1);
+    }
+  };
+  const isDisabled = () => props.disabled || context?.loading();
+  return (() => {
+    var _el$39 = _tmpl$14(), _el$40 = _el$39.firstChild;
+    insert(_el$40, () => props.label);
+    insert(_el$39, (() => {
+      var _c$8 = memo(() => !!(props.maxSelectedItems === 1 && !!props.renderSelection && value().length === 1));
+      return () => _c$8() ? (() => {
+        var _el$41 = _tmpl$15(), _el$42 = _el$41.firstChild, _el$43 = _el$42.nextSibling;
+        insert(_el$42, () => props.renderSelection({
+          item: value()[0],
+          init: initData
+        }));
+        _el$43.$$click = () => {
+          setValue([]);
+          setQuery("");
+          setTimeout(() => document.getElementById(props.id || _id)?.focus(), 0);
+        };
+        effect(() => _el$43.disabled = isDisabled());
+        return _el$41;
+      })() : (() => {
+        var _el$44 = _tmpl$16(), _el$45 = _el$44.firstChild, _el$46 = _el$45.firstChild;
+        insert(_el$45, (() => {
+          var _c$0 = memo(() => !!!!value().length);
+          return () => _c$0() && (() => {
+            var _el$47 = _tmpl$17();
+            _el$47.$$click = () => {
+              if (isDisabled()) return;
+              setValue([]);
+            };
+            _el$47.$$keydown = (event) => {
+              if (isDisabled()) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                setValue([]);
+              }
+            };
+            insert(_el$47, () => value().length);
+            effect((_p$) => {
+              var _v$20 = isDisabled() ? -1 : 0, _v$21 = isDisabled() ? "true" : void 0;
+              _v$20 !== _p$.e && setAttribute(_el$47, "tabindex", _p$.e = _v$20);
+              _v$21 !== _p$.t && setAttribute(_el$47, "aria-disabled", _p$.t = _v$21);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$47;
+          })();
+        })(), _el$46);
+        _el$46.$$keydown = handleKeyDown;
+        _el$46.$$input = (e) => {
+          if (isDisabled()) return;
+          setQuery(e.target.value);
+          setSuggIndex(-1);
+        };
+        insert(_el$44, (() => {
+          var _c$1 = memo(() => !!!!suggItems().length);
+          return () => _c$1() && (() => {
+            var _el$48 = _tmpl$53();
+            use((el) => suggListRef = el, _el$48);
+            insert(_el$48, createComponent(For, {
+              get each() {
+                return suggItems();
+              },
+              children: (item, idx) => {
+                const handleSelect = () => {
+                  if (isDisabled()) return;
+                  selectItem(item);
+                  document.getElementById(props.id || _id)?.focus();
+                };
+                return (() => {
+                  var _el$49 = _tmpl$62();
+                  _el$49.$$click = handleSelect;
+                  _el$49.$$pointerdown = (e) => e.preventDefault();
+                  insert(_el$49, () => props.renderItem({
+                    item,
+                    init: initData
+                  }));
+                  effect((_p$) => {
+                    var _v$22 = !!selectedIds().has(item.id), _v$23 = !!(idx() === suggIndex());
+                    _v$22 !== _p$.e && _el$49.classList.toggle("ss__selected", _p$.e = _v$22);
+                    _v$23 !== _p$.t && _el$49.classList.toggle("ss__hovered", _p$.t = _v$23);
+                    return _p$;
+                  }, {
+                    e: void 0,
+                    t: void 0
+                  });
+                  return _el$49;
+                })();
+              }
+            }));
+            return _el$48;
+          })();
+        })(), null);
+        effect((_p$) => {
+          var _v$18 = props.id || _id, _v$19 = isDisabled();
+          _v$18 !== _p$.e && setAttribute(_el$46, "id", _p$.e = _v$18);
+          _v$19 !== _p$.t && (_el$46.disabled = _p$.t = _v$19);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        effect(() => _el$46.value = query());
+        return _el$44;
+      })();
+    })(), null);
+    insert(_el$39, (() => {
+      var _c$9 = memo(() => !!!!error());
+      return () => _c$9() && (() => {
+        var _el$50 = _tmpl$72();
+        insert(_el$50, error);
+        return _el$50;
+      })();
+    })(), null);
+    effect(() => setAttribute(_el$40, "for", props.id || _id));
+    return _el$39;
+  })();
+};
+SSForm.SubmitButton = function(props) {
+  const context = useContext(SSFormContext);
+  return (() => {
+    var _el$51 = _tmpl$18();
+    insert(_el$51, createComponent(SSButton, {
+      type: "submit",
+      "class": "ss_form_submit",
+      get disabled() {
+        return props.disabled || context?.loading();
+      },
+      get children() {
+        return props.children;
+      }
+    }));
+    return _el$51;
+  })();
+};
+SSForm.rules = {
+  required: (value) => !value ? "Pflichtfeld" : null,
+  minLength: (length) => (value) => {
+    if (value === null) value = "";
+    if (typeof value !== "string") {
+      throw new Error(`invalid rule minLength(..) for non-string value ${value}`);
+    }
+    if (value.length < length) return `Mindestens ${length} Zeichen`;
+    return null;
+  },
+  maxLength: (length) => (value) => {
+    if (value === null) value = "";
+    if (typeof value !== "string") {
+      throw new Error(`invalid rule maxLength(..) for non-string value ${value}`);
+    }
+    if (value.length < length) return `Maximal ${length} Zeichen`;
+    return null;
+  },
+  pattern: (pattern) => (value) => {
+    if (value === null) value = "";
+    if (typeof value !== "string") {
+      throw new Error(`invalid rule pattern(..) for non-string value ${value}`);
+    }
+    if (!pattern.test(value)) return "Eingabe widerspricht erwartetem Muster";
+    return null;
+  }
+};
+delegateEvents(["input", "keydown", "pointerdown", "click"]);
+var _tmpl$19 = /* @__PURE__ */ template(`<div><div class=ss_header__text><h3 class=ss_header__title></h3></div><div class=ss_header__actions>`);
+var _tmpl$27 = /* @__PURE__ */ template(`<h5 class=ss_header__subtitle>`);
+function SSHeader(props) {
+  return (() => {
+    var _el$ = _tmpl$19(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
+    insert(_el$3, () => props.title);
+    insert(_el$2, (() => {
+      var _c$ = memo(() => !!props.subtitle);
+      return () => _c$() && (() => {
+        var _el$5 = _tmpl$27();
+        insert(_el$5, () => props.subtitle);
+        return _el$5;
+      })();
+    })(), null);
+    insert(_el$4, () => props.actions);
+    effect((_p$) => {
+      var _v$ = `ss_header ${props.class ?? ""}`, _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+}
+var _tmpl$20 = /* @__PURE__ */ template(`<div class=ss_modal__footer>`);
+var _tmpl$28 = /* @__PURE__ */ template(`<div class=ss_modal><div class=ss_modal__backdrop></div><div class=ss_modal__panel role=dialog aria-modal=true tabindex=-1><div class=ss_modal__body><div class=ss_modal__body_inner>`);
+var _tmpl$37 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M18 6l-12 12"></path><path d="M6 6l12 12">`);
+var _tmpl$45 = /* @__PURE__ */ template(`<div class=ss_modal__header>`);
+var _tmpl$54 = /* @__PURE__ */ template(`<h2 class=ss_modal__title>`);
+var CLOSE_ANIMATION_MS = 180;
+function SSModal(props) {
+  const [isMounted, setIsMounted] = createSignal(props.open);
+  const [state, setState] = createSignal("closed");
+  const titleId = createUniqueId();
+  let closeTimeout;
+  let rafId;
+  let panelRef;
+  createEffect(() => {
+    if (closeTimeout) clearTimeout(closeTimeout);
+    if (rafId) cancelAnimationFrame(rafId);
+    if (props.open) {
+      if (!isMounted()) setIsMounted(true);
+      setState("closed");
+      rafId = requestAnimationFrame(() => setState("open"));
+    } else {
+      setState("closed");
+      if (isMounted()) {
+        closeTimeout = window.setTimeout(() => setIsMounted(false), CLOSE_ANIMATION_MS);
+      }
+    }
+  });
+  onMount(() => {
+    if (!props.open) return;
+    if (props.lockScroll !== false) {
+      const prev = document.body.style.overflowY;
+      document.body.style.overflowY = "hidden";
+      onCleanup(() => {
+        document.body.style.overflowY = prev;
+      });
+    }
+    rafId = requestAnimationFrame(() => panelRef?.focus());
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && props.dismissible !== false) {
+        props.onClose?.();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => window.removeEventListener("keydown", handleKeyDown));
+  });
+  onCleanup(() => {
+    if (closeTimeout) clearTimeout(closeTimeout);
+    if (rafId) cancelAnimationFrame(rafId);
+  });
+  const handleBackdropClick = () => {
+    if (props.dismissible === false) return;
+    props.onClose?.();
+  };
+  return createComponent(Show, {
+    get when() {
+      return isMounted();
+    },
+    get children() {
+      return createComponent(Portal, {
+        get children() {
+          var _el$ = _tmpl$28(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
+          _el$2.$$click = handleBackdropClick;
+          use((el) => panelRef = el, _el$3);
+          insert(_el$3, (() => {
+            var _c$ = memo(() => !!(props.title || props.onClose));
+            return () => _c$() && (() => {
+              var _el$7 = _tmpl$45();
+              insert(_el$7, (() => {
+                var _c$2 = memo(() => !!props.title);
+                return () => _c$2() && (() => {
+                  var _el$9 = _tmpl$54();
+                  setAttribute(_el$9, "id", titleId);
+                  insert(_el$9, () => props.title);
+                  return _el$9;
+                })();
+              })(), null);
+              insert(_el$7, createComponent(Show, {
+                get when() {
+                  return props.onClose;
+                },
+                get children() {
+                  return createComponent(SSButton, {
+                    type: "button",
+                    "class": "ss_modal__close",
+                    isIconOnly: true,
+                    ariaLabel: "Dialog schlie\xDFen",
+                    onclick: () => {
+                      if (props.dismissible === false) return;
+                      props.onClose?.();
+                    },
+                    get children() {
+                      return _tmpl$37();
+                    }
+                  });
+                }
+              }), null);
+              return _el$7;
+            })();
+          })(), _el$4);
+          insert(_el$5, () => props.children);
+          insert(_el$3, createComponent(Show, {
+            get when() {
+              return props.footer;
+            },
+            get children() {
+              var _el$6 = _tmpl$20();
+              insert(_el$6, () => props.footer);
+              return _el$6;
+            }
+          }), null);
+          effect((_p$) => {
+            var _v$ = state(), _v$2 = state() === "closed", _v$3 = !!(props.size === "sm"), _v$4 = !!(props.size === "lg"), _v$5 = !!props.fullscreen, _v$6 = !!props.disableResponsiveFullscreen, _v$7 = props.title ? titleId : void 0;
+            _v$ !== _p$.e && setAttribute(_el$, "data-state", _p$.e = _v$);
+            _v$2 !== _p$.t && setAttribute(_el$, "aria-hidden", _p$.t = _v$2);
+            _v$3 !== _p$.a && _el$3.classList.toggle("ss_modal__panel--sm", _p$.a = _v$3);
+            _v$4 !== _p$.o && _el$3.classList.toggle("ss_modal__panel--lg", _p$.o = _v$4);
+            _v$5 !== _p$.i && _el$3.classList.toggle("ss_modal__panel--fullscreen", _p$.i = _v$5);
+            _v$6 !== _p$.n && _el$3.classList.toggle("ss_modal__panel--no-fullscreen", _p$.n = _v$6);
+            _v$7 !== _p$.s && setAttribute(_el$3, "aria-labelledby", _p$.s = _v$7);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0
+          });
+          return _el$;
+        }
+      });
+    }
+  });
+}
+delegateEvents(["click"]);
+var SSModalsContext = createContext();
+var modalCounter = 0;
+var nextModalId = () => `ss-modal-${modalCounter++}`;
+function useSSModals() {
+  const context = useContext(SSModalsContext);
+  if (!context) {
+    throw new Error("useSSModals must be used within SSModalsProvider");
+  }
+  return context;
+}
+function DefaultModal(props) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [loading, process] = createLoading();
+  const modalProps = () => props.config.modalProps?.({
+    hide: props.hide
+  }) ?? {};
+  const {
+    primaryButtonText,
+    secondaryButtonText,
+    hideSecondaryButton,
+    danger,
+    ...rest
+  } = modalProps();
+  return createComponent(SSModal, mergeProps({
+    get open() {
+      return props.visible();
+    },
+    get onClose() {
+      return props.hide;
+    }
+  }, rest, {
+    get footer() {
+      return [!hideSecondaryButton && createComponent(SSButton, {
+        "class": "secondary",
+        get onclick() {
+          return props.hide;
+        },
+        children: secondaryButtonText ?? "Abbrechen"
+      }), createComponent(SSButton, {
+        "class": danger ? "danger" : void 0,
+        onclick: () => process(() => props.config.onPrimaryAction?.({
+          hide: props.hide,
+          navigate,
+          pathname: location.pathname
+        }) ?? props.hide()),
+        get disabled() {
+          return loading();
+        },
+        children: primaryButtonText ?? "Weiter"
+      })];
+    },
+    get children() {
+      return props.config.content({
+        hide: props.hide
+      });
+    }
+  }));
+}
+function FormModal(props) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  return createComponent(SSForm, {
+    onsubmit: (context) => props.config.onSubmit({
+      hide: props.hide,
+      context,
+      navigate,
+      pathname: location.pathname
+    }),
+    get children() {
+      return createComponent(FormModalInner, {
+        get visible() {
+          return props.visible;
+        },
+        get hide() {
+          return props.hide;
+        },
+        get config() {
+          return props.config;
+        }
+      });
+    }
+  });
+}
+function FormModalInner(props) {
+  const context = SSForm.useContext();
+  if (!context) return null;
+  const modalProps = () => props.config.modalProps?.({
+    hide: props.hide,
+    context
+  }) ?? {};
+  const {
+    primaryButtonText,
+    secondaryButtonText,
+    hideSecondaryButton,
+    danger,
+    ...rest
+  } = modalProps();
+  return createComponent(SSModal, mergeProps({
+    get open() {
+      return props.visible();
+    },
+    get onClose() {
+      return props.hide;
+    }
+  }, rest, {
+    get footer() {
+      return [!hideSecondaryButton && createComponent(SSButton, {
+        "class": "secondary",
+        get onclick() {
+          return props.hide;
+        },
+        get disabled() {
+          return context.loading();
+        },
+        children: secondaryButtonText ?? "Abbrechen"
+      }), createComponent(SSButton, {
+        "class": danger ? "danger" : void 0,
+        onclick: () => context.submit(),
+        get disabled() {
+          return context.loading();
+        },
+        children: primaryButtonText ?? "Speichern"
+      })];
+    },
+    get children() {
+      return props.config.content({
+        hide: props.hide,
+        context
+      });
+    }
+  }));
+}
+function SSModalsProvider(props) {
+  const [modals, setModals] = createSignal([]);
+  const modalsById = /* @__PURE__ */ new Map();
+  const closeTimeouts = /* @__PURE__ */ new Map();
+  const removeDelayMs = 220;
+  const hide = (id) => {
+    const modal = modalsById.get(id);
+    if (!modal) return;
+    modal.setVisible(false);
+    const existing = closeTimeouts.get(id);
+    if (existing) window.clearTimeout(existing);
+    const timeout = window.setTimeout(() => {
+      setModals((list) => list.filter((modal2) => modal2.id !== id));
+      modalsById.delete(id);
+      closeTimeouts.delete(id);
+    }, removeDelayMs);
+    closeTimeouts.set(id, timeout);
+  };
+  const show = (render) => {
+    const id = nextModalId();
+    const [visible, setVisible] = createSignal(true);
+    const entry = {
+      id,
+      visible,
+      setVisible,
+      render
+    };
+    modalsById.set(id, entry);
+    setModals((list) => [...list, entry]);
+    return id;
+  };
+  const showDefault = (config) => {
+    return show(({
+      hide: hide2,
+      visible
+    }) => createComponent(DefaultModal, {
+      visible,
+      hide: hide2,
+      config
+    }));
+  };
+  const showForm = (config) => {
+    return show(({
+      hide: hide2,
+      visible
+    }) => createComponent(FormModal, {
+      visible,
+      hide: hide2,
+      config
+    }));
+  };
+  onCleanup(() => {
+    closeTimeouts.forEach((timeout) => window.clearTimeout(timeout));
+    closeTimeouts.clear();
+  });
+  return createComponent(SSModalsContext.Provider, {
+    value: {
+      show,
+      showDefault,
+      showForm,
+      hide
+    },
+    get children() {
+      return [memo(() => props.children), createComponent(For, {
+        get each() {
+          return modals();
+        },
+        children: (modal) => {
+          const hideModal = () => hide(modal.id);
+          return modal.render({
+            id: modal.id,
+            hide: hideModal,
+            visible: modal.visible
+          });
+        }
+      })];
+    }
+  });
+}
+var _tmpl$21 = /* @__PURE__ */ template(`<div><input type=checkbox class=ss_shell__drawer_toggle_input><header class=ss_shell__header><div class=ss_shell__header_left><label class="ss_shell__drawer_toggle ss_button ss_button--icon"aria-label="Navigation \xF6ffnen"role=button tabindex=0><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg></label><div class=ss_shell__title></div></div><div class=ss_shell__actions></div></header><div class=ss_shell__body><nav class=ss_shell__nav aria-label=Hauptnavigation><div class=ss_shell__nav_inner></div></nav><div class=ss_shell__main></div><label class=ss_shell__scrim aria-label="Navigation schlie\xDFen">`);
+var _tmpl$29 = /* @__PURE__ */ template(`<div class=ss_shell__nav_list>`);
+var _tmpl$38 = /* @__PURE__ */ template(`<a class=ss_shell__nav_item><span class=ss_shell__nav_label>`);
+var _tmpl$46 = /* @__PURE__ */ template(`<span class=ss_shell__nav_icon>`);
+var _tmpl$55 = /* @__PURE__ */ template(`<button type=button class=ss_shell__nav_item><span class=ss_shell__nav_label>`);
+var _tmpl$63 = /* @__PURE__ */ template(`<details class=ss_shell__nav_group><summary class=ss_shell__nav_group_header><span class=ss_shell__nav_label></span><span class=ss_shell__nav_group_chevron aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class=ss_shell__nav_group_chevron_svg><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></span></summary><div class=ss_shell__nav_group_items>`);
+var SSShellContext = createContext();
+function SSShell(props) {
+  const drawerId = createUniqueId();
+  const location = useLocation();
+  const [hrefs, setHrefs] = createSignal([]);
+  const closeDrawer = () => {
+    const input = document.getElementById(drawerId);
+    if (input) input.checked = false;
+  };
+  const registerHref = (href) => {
+    setHrefs((prev) => prev.includes(href) ? prev : [...prev, href]);
+  };
+  const unregisterHref = (href) => {
+    setHrefs((prev) => prev.filter((item) => item !== href));
+  };
+  const activeHref = createMemo(() => {
+    const path = location.pathname;
+    let best = null;
+    for (const href of hrefs()) {
+      if (!path.startsWith(href)) continue;
+      if (!best || href.length > best.length) {
+        best = href;
+      }
+    }
+    return best;
+  });
+  return createComponent(SSShellContext.Provider, {
+    value: {
+      closeDrawer,
+      activeHref,
+      registerHref,
+      unregisterHref
+    },
+    get children() {
+      var _el$ = _tmpl$21(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$4.nextSibling, _el$8 = _el$3.nextSibling, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$9.nextSibling, _el$10 = _el$1.nextSibling;
+      setAttribute(_el$2, "id", drawerId);
+      setAttribute(_el$5, "for", drawerId);
+      insert(_el$6, () => props.title);
+      insert(_el$7, () => props.actions);
+      insert(_el$0, () => props.nav);
+      insert(_el$1, () => props.children);
+      setAttribute(_el$10, "for", drawerId);
+      effect((_p$) => {
+        var _v$ = `ss_shell ${props.class ?? ""}`, _v$2 = props.style;
+        _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+        _p$.t = style(_el$, _v$2, _p$.t);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$;
+    }
+  });
+}
+SSShell.Nav = function(props) {
+  return (() => {
+    var _el$11 = _tmpl$29();
+    insert(_el$11, () => props.children);
+    return _el$11;
+  })();
+};
+SSShell.NavLink = function(props) {
+  const context = useContext(SSShellContext);
+  onMount(() => context?.registerHref(props.href));
+  onCleanup(() => context?.unregisterHref(props.href));
+  const isActive = () => context?.activeHref() === props.href;
+  return (() => {
+    var _el$12 = _tmpl$38(), _el$13 = _el$12.firstChild;
+    _el$12.$$click = () => {
+      props.onclick?.();
+      context?.closeDrawer();
+    };
+    insert(_el$12, (() => {
+      var _c$ = memo(() => !!props.icon);
+      return () => _c$() && (() => {
+        var _el$14 = _tmpl$46();
+        insert(_el$14, () => props.icon);
+        return _el$14;
+      })();
+    })(), _el$13);
+    insert(_el$13, () => props.children);
+    effect((_p$) => {
+      var _v$3 = !!isActive(), _v$4 = props.href;
+      _v$3 !== _p$.e && _el$12.classList.toggle("ss_shell__nav_item--active", _p$.e = _v$3);
+      _v$4 !== _p$.t && setAttribute(_el$12, "href", _p$.t = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$12;
+  })();
+};
+SSShell.NavAction = function(props) {
+  const context = useContext(SSShellContext);
+  return (() => {
+    var _el$15 = _tmpl$55(), _el$16 = _el$15.firstChild;
+    _el$15.$$click = () => {
+      props.onclick();
+      context?.closeDrawer();
+    };
+    insert(_el$15, (() => {
+      var _c$2 = memo(() => !!props.icon);
+      return () => _c$2() && (() => {
+        var _el$17 = _tmpl$46();
+        insert(_el$17, () => props.icon);
+        return _el$17;
+      })();
+    })(), _el$16);
+    insert(_el$16, () => props.children);
+    return _el$15;
+  })();
+};
+SSShell.NavGroup = function(props) {
+  return (() => {
+    var _el$18 = _tmpl$63(), _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$19.nextSibling;
+    insert(_el$19, (() => {
+      var _c$3 = memo(() => !!props.icon);
+      return () => _c$3() && (() => {
+        var _el$22 = _tmpl$46();
+        insert(_el$22, () => props.icon);
+        return _el$22;
+      })();
+    })(), _el$20);
+    insert(_el$20, () => props.title);
+    insert(_el$21, () => props.children);
+    effect(() => _el$18.open = props.initiallyExpanded);
+    return _el$18;
+  })();
+};
+delegateEvents(["click"]);
+var _tmpl$30 = /* @__PURE__ */ template(`<div>`);
+function SSSurface(props) {
+  return (() => {
+    var _el$ = _tmpl$30();
+    insert(_el$, () => props.children);
+    effect((_p$) => {
+      var _v$ = `ss_surface ${props.class ?? ""}`, _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+}
+var _tmpl$31 = /* @__PURE__ */ template(`<div><div class=ss_tile__row><div class=ss_tile__content>`);
+var _tmpl$210 = /* @__PURE__ */ template(`<span class=ss_tile__icon>`);
+var _tmpl$39 = /* @__PURE__ */ template(`<h5 class=ss_tile__title>`);
+var _tmpl$47 = /* @__PURE__ */ template(`<h5 class=ss_tile__title><span class=ss_tile__text>`);
+var _tmpl$56 = /* @__PURE__ */ template(`<div class=ss_tile__subtitle>`);
+var _tmpl$64 = /* @__PURE__ */ template(`<div class=ss_tile__trailing>`);
+function SSTile(props) {
+  return (() => {
+    var _el$ = _tmpl$31(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+    insert(_el$2, (() => {
+      var _c$ = memo(() => !!props.icon);
+      return () => _c$() && (() => {
+        var _el$4 = _tmpl$210();
+        insert(_el$4, () => props.icon);
+        return _el$4;
+      })();
+    })(), _el$3);
+    insert(_el$3, (() => {
+      var _c$2 = memo(() => !!props.href);
+      return () => _c$2() ? (() => {
+        var _el$5 = _tmpl$39();
+        insert(_el$5, createComponent(A, {
+          "class": "ss_tile__link",
+          get href() {
+            return props.href;
+          },
+          get onclick() {
+            return props.onLinkClick;
+          },
+          get children() {
+            return props.title;
+          }
+        }));
+        return _el$5;
+      })() : (() => {
+        var _el$6 = _tmpl$47(), _el$7 = _el$6.firstChild;
+        insert(_el$7, () => props.title);
+        return _el$6;
+      })();
+    })(), null);
+    insert(_el$3, (() => {
+      var _c$3 = memo(() => !!props.subtitle);
+      return () => _c$3() && (() => {
+        var _el$8 = _tmpl$56();
+        insert(_el$8, () => props.subtitle);
+        return _el$8;
+      })();
+    })(), null);
+    insert(_el$2, (() => {
+      var _c$4 = memo(() => !!props.trailing);
+      return () => _c$4() && (() => {
+        var _el$9 = _tmpl$64();
+        insert(_el$9, () => props.trailing);
+        return _el$9;
+      })();
+    })(), null);
+    effect((_p$) => {
+      var _v$ = `ss_tile ${props.class ?? ""}`, _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+}
+function createSSTile(build) {
+  return function(props) {
+    const built = build(props.data);
+    return createComponent(SSTile, mergeProps(built, {
+      get onLinkClick() {
+        return props.onLinkClick ?? built.onLinkClick;
+      },
+      get href() {
+        return memo(() => !!props.noLink)() ? void 0 : built.href;
+      },
+      get icon() {
+        return memo(() => !!props.noIcon)() ? void 0 : built.icon;
+      }
+    }));
+  };
+}
+
+export { SSButton, SSCallout, SSChip, SSDataTable, SSDropdown, SSExpandable, SSForm, SSHeader, SSModal, SSModalsProvider, SSShell, SSSurface, SSTile, createSSTile, useSSModals };