@sortsys/ui 0.1.7 → 0.1.9

package/dist/index.jsx

@@ -1,1607 +0,0 @@
-// src/components/SSButton.tsx
-function SSButton(props) {
-  const classes = () => [
-    "ss_button",
-    props.isIconOnly ? "ss_button--icon" : "",
-    props.class ?? ""
-  ].filter(Boolean).join(" ");
-  return <button
-    type={props.type ?? "button"}
-    class={classes()}
-    disabled={props.disabled}
-    aria-label={props.ariaLabel}
-    form={props.form}
-    onclick={props.onclick}
-  >
-      {props.children}
-    </button>;
-}
-
-// src/components/SSCallout.tsx
-function SSCallout(props) {
-  const { icon, color, class: className, style, children: children2, ...rest } = props;
-  return <div
-    {...rest}
-    class={`ss_callout ss_callout--${color} ${className ?? ""}`}
-    style={style}
-  >
-      <span class="ss_callout__icon">
-        {icon}
-      </span>
-      <div class="ss_callout__content">
-        <span>{children2}</span>
-      </div>
-    </div>;
-}
-
-// src/components/SSChip.tsx
-function SSChip(props) {
-  const commonClass = `ss_chip ss_chip--${props.color ?? "blue"} ${props.class ?? ""}`;
-  if ("onclick" in props && props.onclick) {
-    return <button
-      type="button"
-      class={`${commonClass} ss_chip--clickable`}
-      style={props.style}
-      onclick={props.onclick}
-    >
-        <span class="ss_chip__label">{props.children}</span>
-      </button>;
-  }
-  return <div class={commonClass} style={props.style}>
-      <span class="ss_chip__label">{props.children}</span>
-      {"ondismiss" in props && props.ondismiss && <button
-    type="button"
-    class="ss_chip__dismiss"
-    aria-label="Entfernen"
-    onclick={props.ondismiss}
-  >
-          <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 d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
-        </button>}
-    </div>;
-}
-
-// src/components/SSDataTable.tsx
-import { createEffect, createMemo, createResource, createSignal, For } from "solid-js";
-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 <div>
-      {(() => {
-    const value = rendered();
-    if (value && typeof value.then === "function") {
-      return asyncContent() ?? "";
-    }
-    return value;
-  })()}
-    </div>;
-}
-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 = () => <div class="ss_table__pagination">
-      <button
-    type="button"
-    class="ss_table__page_button"
-    disabled={page() === 1}
-    aria-label="Erste Seite"
-    onclick={() => goToPage(1)}
-  >
-        <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 d="M7 6v12" /><path d="M18 6l-6 6l6 6" /></svg>
-      </button>
-      <button
-    type="button"
-    class="ss_table__page_button"
-    disabled={page() === 1}
-    aria-label="Vorherige Seite"
-    onclick={() => goToPage(page() - 1)}
-  >
-        <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 d="M15 6l-6 6l6 6" /></svg>
-      </button>
-      <span class="ss_table__page_info">
-        Seite {page()} von {totalPages()}
-      </span>
-      <button
-    type="button"
-    class="ss_table__page_button"
-    disabled={page() === totalPages()}
-    aria-label="Nächste Seite"
-    onclick={() => goToPage(page() + 1)}
-  >
-        <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 d="M9 6l6 6l-6 6" /></svg>
-      </button>
-      <button
-    type="button"
-    class="ss_table__page_button"
-    disabled={page() === totalPages()}
-    aria-label="Letzte Seite"
-    onclick={() => goToPage(totalPages())}
-  >
-        <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 d="M6 6l6 6l-6 6" /><path d="M17 5v13" /></svg>
-      </button>
-    </div>;
-  return <div class={containerClass()} style={props.style}>
-      {paginationPosition() === "top" && paginationBar()}
-      <div class="ss_table__scroll">
-        <table>
-        <thead>
-          <tr>
-            <For each={props.columns}>
-              {(column, index) => {
-    const sortable = !!column.sortKey;
-    const isActive = () => sortIndex() === index();
-    const currentDir = () => isActive() ? sortDir() : null;
-    return <th>
-                    {sortable ? <button
-      type="button"
-      class="ss_table__sort_button"
-      aria-sort={currentDir() === "asc" ? "ascending" : currentDir() === "desc" ? "descending" : "none"}
-      data-sort={currentDir() ?? "none"}
-      onclick={() => toggleSort(index())}
-    >
-                        {column.label}
-                        <span class="ss_table__sort_icon" aria-hidden="true">
-                          {currentDir() === "asc" ? <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 d="M6 9l6 6l6 -6" /></svg> : currentDir() === "desc" ? <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 d="M6 15l6 -6l6 6" /></svg> : <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 d="M8 9l4 -4l4 4" /><path d="M16 15l-4 4l-4 -4" /></svg>}
-                        </span>
-                      </button> : <span class="ss_table__header_label">{column.label}</span>}
-                  </th>;
-  }}
-            </For>
-          </tr>
-        </thead>
-        <tbody>
-          <For each={pagedRows()}>
-            {(row) => <tr
-    data-clickable={props.onRowClick ? "true" : void 0}
-    onclick={() => props.onRowClick?.(row)}
-  >
-                <For each={props.columns}>
-                  {(column) => <td>
-                      <SSDataCell row={row} render={column.render} />
-                    </td>}
-                </For>
-              </tr>}
-          </For>
-        </tbody>
-        </table>
-      </div>
-      {paginationPosition() === "bottom" && paginationBar()}
-    </div>;
-}
-
-// src/components/SSDropdown.tsx
-import { createSignal as createSignal2, For as For2, onCleanup, onMount, Show, createEffect as createEffect2 } from "solid-js";
-function SSDropdown(props) {
-  const [open, setOpen] = createSignal2(false);
-  const [renderMenu, setRenderMenu] = createSignal2(false);
-  const [menuState, setMenuState] = createSignal2("closed");
-  let rootRef;
-  const close = () => setOpen(false);
-  createEffect2(() => {
-    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 <div class={`ss_dropdown ${props.class ?? ""}`} style={props.style} ref={(el) => rootRef = el}>
-      <button
-    type="button"
-    class="ss_dropdown__trigger ss_button ss_button--icon"
-    aria-haspopup="menu"
-    aria-expanded={open()}
-    aria-label={props.ariaLabel ?? "Aktionen \xF6ffnen"}
-    onclick={() => setOpen((value) => !value)}
-  >
-        {props.icon ?? <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 d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>}
-      </button>
-
-      <Show when={renderMenu()}>
-        <div
-    class="ss_dropdown__menu"
-    role="menu"
-    data-state={menuState()}
-  >
-          <For2 each={props.items}>
-            {(item) => <button
-    type="button"
-    class="ss_dropdown__item"
-    role={item.checked ? "menuitemcheckbox" : "menuitem"}
-    aria-checked={item.checked ? "true" : void 0}
-    onclick={async () => {
-      close();
-      await item.onclick?.();
-    }}
-  >
-                <span class="ss_dropdown__item_icon">{item.icon}</span>
-                <span class="ss_dropdown__item_label">{item.label}</span>
-                {item.checked && <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 d="M5 12l5 5l10 -10" /></svg>
-                  </span>}
-              </button>}
-          </For2>
-        </div>
-      </Show>
-    </div>;
-}
-
-// src/components/SSExpandable.tsx
-import { createMemo as createMemo2, createSignal as createSignal3, onCleanup as onCleanup2 } from "solid-js";
-var TRANSITION_MS = 200;
-function SSExpandable(props) {
-  const [height, setHeight] = createSignal3(props.initiallyExpanded ? "auto" : 0);
-  const isExpanded = createMemo2(() => 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);
-  };
-  onCleanup2(() => {
-    if (timeoutId) clearTimeout(timeoutId);
-  });
-  return <div
-    class={`ss_expandable ${props.class ?? ""}`}
-    style={props.style}
-    data-state={isExpanded() ? "open" : "closed"}
-  >
-      <div
-    class="ss_expandable__header"
-    role="button"
-    tabindex="0"
-    aria-expanded={isExpanded()}
-    onclick={toggle}
-    onkeydown={(event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        toggle();
-      }
-    }}
-  >
-        <span class="ss_expandable__icon" aria-hidden="true">
-          {isExpanded() ? <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 d="M6 9l6 6l6 -6" /></svg> : <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 d="M9 6l6 6l-6 6" /></svg>}
-        </span>
-        <span class="ss_expandable__title">{props.title}</span>
-      </div>
-
-      <div
-    ref={(el) => contentRef = el}
-    class="ss_expandable__content"
-    style={{
-      height: typeof height() === "number" ? `${height()}px` : height(),
-      "transition-duration": `${TRANSITION_MS}ms`
-    }}
-  >
-        <div class='ss_expandable__divider_wrapper'>
-          <div class="ss_expandable__divider" />
-          {props.children}
-        </div>
-      </div>
-    </div>;
-}
-
-// src/components/SSForm.tsx
-import { createContext, createEffect as createEffect3, createMemo as createMemo3, createSignal as createSignal5, createUniqueId, For as For3, onCleanup as onCleanup3, onMount as onMount2, untrack, useContext } from "solid-js";
-
-// src/hooks/createLoading.ts
-import { createSignal as createSignal4 } from "solid-js";
-function createLoading() {
-  const [loading, setLoading] = createSignal4(false);
-  return [loading, async (callback) => {
-    if (loading()) return;
-    try {
-      setLoading(true);
-      await callback();
-    } finally {
-      setLoading(false);
-    }
-  }];
-}
-
-// src/components/SSForm.tsx
-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 <form class="ss_form" onsubmit={(e) => {
-    e.preventDefault();
-    context.submit();
-  }}>
-    <SSFormContext.Provider value={context}>
-      {props.children}
-    </SSFormContext.Provider>
-  </form>;
-};
-SSForm.Input = function(props) {
-  const context = useContext(SSFormContext);
-  const [value, setValue] = createSignal5("");
-  const [error, setError] = createSignal5(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;
-    onMount2(() => context.setField(name, field));
-    onCleanup3(() => context.delField(name));
-  }
-  let suggInitData = null;
-  const [suggItems, setSuggItems] = createSignal5([]);
-  const [suggIndex, setSuggIndex] = createSignal5(-1);
-  let suggListRef;
-  if (props.suggestions) {
-    const sugg = props.suggestions;
-    const [initialized, setInitialized] = createSignal5(!sugg.prepare);
-    if (sugg.prepare) onMount2(async () => {
-      if (!sugg.prepare) return;
-      suggInitData = await sugg.prepare();
-      setInitialized(true);
-    });
-    let timeout;
-    createEffect3(() => {
-      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);
-    });
-    onCleanup3(() => clearTimeout(timeout ?? void 0));
-  }
-  createEffect3(() => {
-    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 <div class="ss_form_input">
-    <label for={props.id || _id}>{props.label}</label>
-
-    <div class="ss__wrapper">
-      {props.textArea ? <textarea
-    id={props.id || _id}
-    value={value()}
-    oninput={(e) => handleInputChange(e.target.value)}
-    onkeydown={handleKeyDown}
-    disabled={props.disabled || context?.loading()}
-  /> : <input
-    id={props.id || _id}
-    value={value()}
-    oninput={(e) => handleInputChange(e.target.value)}
-    onkeydown={handleKeyDown}
-    disabled={props.disabled || context?.loading()}
-    type={props.type}
-  />}
-
-      {!!suggItems().length && <ul class="ss__suggestions" ref={(el) => suggListRef = el}>
-        <For3 each={suggItems()}>
-          {(item, idx) => {
-    const handleSelect = () => {
-      const active = document.activeElement;
-      if (active instanceof HTMLElement) active.blur();
-      selectSuggestion(item);
-    };
-    return <li
-      onpointerdown={(e) => e.preventDefault()}
-      onclick={handleSelect}
-      classList={{ "ss__hovered": idx() === suggIndex() }}
-    >
-              {props.suggestions.stringify({ item, init: suggInitData })}
-            </li>;
-  }}
-        </For3>
-      </ul>}
-    </div>
-
-    {!!error() && <span role="alert">{error()}</span>}
-  </div>;
-};
-SSForm.Date = function(props) {
-  const context = useContext(SSFormContext);
-  const [value, setValue] = createSignal5("");
-  const [error, setError] = createSignal5(null);
-  const [open, setOpen] = createSignal5(false);
-  const [viewDate, setViewDate] = createSignal5(/* @__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;
-  };
-  createEffect3(() => {
-    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;
-    onMount2(() => context.setField(name, field));
-    onCleanup3(() => 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);
-  };
-  onMount2(() => {
-    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);
-    onCleanup3(() => {
-      document.removeEventListener("mousedown", handleOutside);
-      window.removeEventListener("keydown", handleKeyDown);
-    });
-  });
-  return <div class="ss_form_date" ref={(el) => containerRef = el}>
-    <label for={props.id || _id}>{props.label}</label>
-
-    <div class="ss__wrapper">
-      <input
-    id={props.id || _id}
-    value={value()}
-    oninput={(e) => setValue(e.target.value)}
-    onfocus={() => setOpen(true)}
-    disabled={props.disabled || context?.loading()}
-    readonly={!props.editable}
-    type="text"
-    inputmode="numeric"
-    autocomplete="off"
-    placeholder="TT.MM.JJJJ"
-  />
-      <button
-    type="button"
-    class="ss_form_date__icon"
-    aria-label="Kalender öffnen"
-    aria-haspopup="dialog"
-    aria-expanded={open()}
-    onclick={() => setOpen((value2) => !value2)}
-    disabled={props.disabled || context?.loading()}
-  >
-        <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 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 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 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 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 d="M12.02 15a1 1 0 0 1 0 2a1.001 1.001 0 1 1 -.005 -2z" /><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" /></svg>
-      </button>
-    </div>
-
-    {open() && <div class="ss_form_date__picker" role="dialog" aria-label="Datum auswählen">
-        <div class="ss_form_date__header">
-          <div class="ss_form_date__nav_group">
-            <button type="button" class="ss_form_date__nav" onclick={() => {
-    const current = viewDate();
-    setViewDate(new Date(current.getFullYear() - 1, current.getMonth(), 1));
-  }}>
-              <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 d="M7 6v12" /><path d="M18 6l-6 6l6 6" /></svg>
-            </button>
-            <button type="button" class="ss_form_date__nav" onclick={() => {
-    const current = viewDate();
-    setViewDate(new Date(current.getFullYear(), current.getMonth() - 1, 1));
-  }}>
-              <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 d="M15 6l-6 6l6 6" /></svg>
-            </button>
-          </div>
-          <div class="ss_form_date__title">{monthLabel()}</div>
-          <div class="ss_form_date__nav_group">
-            <button type="button" class="ss_form_date__nav" onclick={() => {
-    const current = viewDate();
-    setViewDate(new Date(current.getFullYear(), current.getMonth() + 1, 1));
-  }}>
-              <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 d="M9 6l6 6l-6 6" /></svg>
-            </button>
-            <button type="button" class="ss_form_date__nav" onclick={() => {
-    const current = viewDate();
-    setViewDate(new Date(current.getFullYear() + 1, current.getMonth(), 1));
-  }}>
-              <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 d="M6 6l6 6l-6 6" /><path d="M17 5v13" /></svg>
-            </button>
-          </div>
-        </div>
-        <div class="ss_form_date__weekdays">
-          {["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"].map((day) => <span>{day}</span>)}
-        </div>
-        <div class="ss_form_date__grid">
-          {buildCalendar().map((day) => day ? <button
-    type="button"
-    class="ss_form_date__day"
-    classList={{ "is-selected": isSelected(day), "is-today": isToday(day) }}
-    onclick={() => handleSelect(day)}
-  >
-                {day}
-              </button> : <span class="ss_form_date__day is-empty" />)}
-        </div>
-      </div>}
-
-    {!!error() && <span role="alert">{error()}</span>}
-  </div>;
-};
-SSForm.Checkbox = function(props) {
-  const context = useContext(SSFormContext);
-  const [value, setValue] = createSignal5(false);
-  const [error, setError] = createSignal5(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;
-    onMount2(() => context.setField(name, field));
-    onCleanup3(() => context.delField(name));
-  }
-  const _id = createUniqueId();
-  return <div class="ss_form_checkbox">
-    <div class="ss__wrapper">
-      <input
-    id={props.id || _id}
-    type="checkbox"
-    checked={value()}
-    onchange={(e) => setValue(e.target.checked)}
-    disabled={props.disabled || context?.loading()}
-  />
-      <label for={props.id || _id}>{props.label}</label>
-    </div>
-
-    {!!error() && <span role="alert">{error()}</span>}
-  </div>;
-};
-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] = createSignal5([]);
-  const [value, setValue] = createSignal5(null);
-  const [error, setError] = createSignal5(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);
-  };
-  createEffect3(() => {
-    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;
-    onMount2(() => context.setField(name, field));
-    onCleanup3(() => context.delField(name));
-  }
-  const _id = createUniqueId();
-  return <div class="ss_form_select">
-    <label for={props.id || _id}>{props.label}</label>
-
-    <div class="ss_form_select__field">
-      <select
-    id={props.id || _id}
-    onchange={(e) => setValue(e.target.value)}
-    disabled={props.disabled || context?.loading()}
-  >
-        <For3 each={options()}>
-          {(opt) => <option value={opt.id} selected={value() === opt.id}>{opt.label}</option>}
-        </For3>
-      </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 d="M6 9l6 6l6 -6" /></svg>
-      </span>
-    </div>
-
-    {!!error() && <span role="alert">{error()}</span>}
-  </div>;
-};
-SSForm.ACSelect = function(props) {
-  const context = useContext(SSFormContext);
-  const [query, setQuery] = createSignal5("");
-  const [value, setValue] = createSignal5([]);
-  const [error, setError] = createSignal5(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;
-    onMount2(() => context.setField(name, field));
-    onCleanup3(() => context.delField(name));
-  }
-  let initData = null;
-  const [initialized, setInitialized] = createSignal5(!props.prepare);
-  if (props.prepare) onMount2(async () => {
-    if (!props.prepare) return;
-    initData = await props.prepare();
-    setInitialized(true);
-  });
-  const [suggItems, setSuggItems] = createSignal5([]);
-  const [suggIndex, setSuggIndex] = createSignal5(-1);
-  let suggListRef;
-  let timeout;
-  createEffect3(() => {
-    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);
-  });
-  createEffect3(() => {
-    const _query = query().trim().toLowerCase();
-    if (_query) return;
-    if (suggItems().length !== value().length) setSuggItems(value());
-  });
-  onCleanup3(() => clearTimeout(timeout));
-  createEffect3(() => {
-    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 = createMemo3(() => {
-    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 <div class="ss_form_ac_select">
-    <label for={props.id || _id}>{props.label}</label>
-
-    {props.maxSelectedItems === 1 && !!props.renderSelection && value().length === 1 ? <div class="ss__selection">
-        <div class="ss__content">
-          {props.renderSelection({ item: value()[0], init: initData })}
-        </div>
-        <button
-    type="button"
-    class="ss__clear"
-    disabled={isDisabled()}
-    aria-label="Auswahl entfernen"
-    onclick={() => {
-      setValue([]);
-      setQuery("");
-      setTimeout(() => document.getElementById(props.id || _id)?.focus(), 0);
-    }}
-  >
-          ×
-        </button>
-      </div> : <div class="ss__wrapper">
-
-        <div class="ss__input_row">
-          {!!value().length && <span
-    class="ss__prefix"
-    role="button"
-    tabindex={isDisabled() ? -1 : 0}
-    aria-disabled={isDisabled() ? "true" : void 0}
-    onkeydown={(event) => {
-      if (isDisabled()) return;
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        setValue([]);
-      }
-    }}
-    onclick={() => {
-      if (isDisabled()) return;
-      setValue([]);
-    }}
-  >
-            {value().length}
-          </span>}
-
-          <input
-    id={props.id || _id}
-    value={query()}
-    oninput={(e) => {
-      if (isDisabled()) return;
-      setQuery(e.target.value);
-      setSuggIndex(-1);
-    }}
-    onkeydown={handleKeyDown}
-    disabled={isDisabled()}
-  />
-        </div>
-
-        {!!suggItems().length && <ul class="ss__suggestions" ref={(el) => suggListRef = el}>
-          <For3 each={suggItems()}>
-            {(item, idx) => {
-    const handleSelect = () => {
-      if (isDisabled()) return;
-      selectItem(item);
-      document.getElementById(props.id || _id)?.focus();
-    };
-    return <li
-      onpointerdown={(e) => e.preventDefault()}
-      onclick={handleSelect}
-      classList={{
-        "ss__selected": selectedIds().has(item.id),
-        "ss__hovered": idx() === suggIndex()
-      }}
-    >
-                {props.renderItem({ item, init: initData })}
-              </li>;
-  }}
-          </For3>
-        </ul>}
-      </div>}
-
-    {!!error() && <span role="alert">{error()}</span>}
-  </div>;
-};
-SSForm.SubmitButton = function(props) {
-  const context = useContext(SSFormContext);
-  return <div>
-    <SSButton
-    type="submit"
-    class="ss_form_submit"
-    disabled={props.disabled || context?.loading()}
-  >
-      {props.children}
-    </SSButton>
-  </div>;
-};
-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;
-  }
-};
-
-// src/components/SSHeader.tsx
-function SSHeader(props) {
-  return <div class={`ss_header ${props.class ?? ""}`} style={props.style}>
-      <div class="ss_header__text">
-        <h3 class="ss_header__title">{props.title}</h3>
-        {props.subtitle && <h5 class="ss_header__subtitle">{props.subtitle}</h5>}
-      </div>
-      <div class="ss_header__actions">{props.actions}</div>
-    </div>;
-}
-
-// src/components/SSModal.tsx
-import { Show as Show3, createEffect as createEffect4, createSignal as createSignal6, createUniqueId as createUniqueId2, onCleanup as onCleanup4, onMount as onMount3 } from "solid-js";
-import { Portal } from "solid-js/web";
-var CLOSE_ANIMATION_MS = 180;
-function SSModal(props) {
-  const [isMounted, setIsMounted] = createSignal6(props.open);
-  const [state, setState] = createSignal6("closed");
-  const titleId = createUniqueId2();
-  let closeTimeout;
-  let rafId;
-  let panelRef;
-  createEffect4(() => {
-    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);
-      }
-    }
-  });
-  onMount3(() => {
-    if (!props.open) return;
-    if (props.lockScroll !== false) {
-      const prev = document.body.style.overflowY;
-      document.body.style.overflowY = "hidden";
-      onCleanup4(() => {
-        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);
-    onCleanup4(() => window.removeEventListener("keydown", handleKeyDown));
-  });
-  onCleanup4(() => {
-    if (closeTimeout) clearTimeout(closeTimeout);
-    if (rafId) cancelAnimationFrame(rafId);
-  });
-  const handleBackdropClick = () => {
-    if (props.dismissible === false) return;
-    props.onClose?.();
-  };
-  return <Show3 when={isMounted()}>
-      <Portal>
-        <div class="ss_modal" data-state={state()} aria-hidden={state() === "closed"}>
-          <div class="ss_modal__backdrop" onclick={handleBackdropClick} />
-          <div
-    class="ss_modal__panel"
-    classList={{
-      "ss_modal__panel--sm": props.size === "sm",
-      "ss_modal__panel--lg": props.size === "lg",
-      "ss_modal__panel--fullscreen": props.fullscreen,
-      "ss_modal__panel--no-fullscreen": props.disableResponsiveFullscreen
-    }}
-    ref={(el) => panelRef = el}
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby={props.title ? titleId : void 0}
-    tabindex="-1"
-  >
-            {(props.title || props.onClose) && <div class="ss_modal__header">
-                {props.title && <h2 id={titleId} class="ss_modal__title">
-                    {props.title}
-                  </h2>}
-                <Show3 when={props.onClose}>
-                  <SSButton
-    type="button"
-    class="ss_modal__close"
-    isIconOnly
-    ariaLabel="Dialog schließen"
-    onclick={() => {
-      if (props.dismissible === false) return;
-      props.onClose?.();
-    }}
-  >
-                    <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 d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
-                  </SSButton>
-                </Show3>
-              </div>}
-
-            <div class="ss_modal__body">
-              <div class="ss_modal__body_inner">{props.children}</div>
-            </div>
-
-            <Show3 when={props.footer}>
-              <div class="ss_modal__footer">{props.footer}</div>
-            </Show3>
-          </div>
-        </div>
-      </Portal>
-    </Show3>;
-}
-
-// src/components/SSModals.tsx
-import { createContext as createContext2, createSignal as createSignal7, For as For4, onCleanup as onCleanup5, useContext as useContext2 } from "solid-js";
-import { useLocation, useNavigate } from "@solidjs/router";
-var SSModalsContext = createContext2();
-var modalCounter = 0;
-var nextModalId = () => `ss-modal-${modalCounter++}`;
-function useSSModals() {
-  const context = useContext2(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 <SSModal
-    open={props.visible()}
-    onClose={props.hide}
-    {...rest}
-    footer={<>
-          {!hideSecondaryButton && <SSButton class="secondary" onclick={props.hide}>
-              {secondaryButtonText ?? "Abbrechen"}
-            </SSButton>}
-          <SSButton
-      class={danger ? "danger" : void 0}
-      onclick={() => process(
-        () => props.config.onPrimaryAction?.({
-          hide: props.hide,
-          navigate,
-          pathname: location.pathname
-        }) ?? props.hide()
-      )}
-      disabled={loading()}
-    >
-            {primaryButtonText ?? "Weiter"}
-          </SSButton>
-        </>}
-  >
-      {props.config.content({ hide: props.hide })}
-    </SSModal>;
-}
-function FormModal(props) {
-  const navigate = useNavigate();
-  const location = useLocation();
-  return <SSForm
-    onsubmit={(context) => props.config.onSubmit({
-      hide: props.hide,
-      context,
-      navigate,
-      pathname: location.pathname
-    })}
-  >
-      <FormModalInner visible={props.visible} hide={props.hide} config={props.config} />
-    </SSForm>;
-}
-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 <SSModal
-    open={props.visible()}
-    onClose={props.hide}
-    {...rest}
-    footer={<>
-          {!hideSecondaryButton && <SSButton class="secondary" onclick={props.hide} disabled={context.loading()}>
-              {secondaryButtonText ?? "Abbrechen"}
-            </SSButton>}
-          <SSButton
-      class={danger ? "danger" : void 0}
-      onclick={() => context.submit()}
-      disabled={context.loading()}
-    >
-            {primaryButtonText ?? "Speichern"}
-          </SSButton>
-        </>}
-  >
-      {props.config.content({ hide: props.hide, context })}
-    </SSModal>;
-}
-function SSModalsProvider(props) {
-  const [modals, setModals] = createSignal7([]);
-  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] = createSignal7(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 }) => <DefaultModal visible={visible} hide={hide2} config={config} />);
-  };
-  const showForm = (config) => {
-    return show(({ hide: hide2, visible }) => <FormModal visible={visible} hide={hide2} config={config} />);
-  };
-  onCleanup5(() => {
-    closeTimeouts.forEach((timeout) => window.clearTimeout(timeout));
-    closeTimeouts.clear();
-  });
-  return <SSModalsContext.Provider value={{ show, showDefault, showForm, hide }}>
-      {props.children}
-
-      <For4 each={modals()}>
-        {(modal) => {
-    const hideModal = () => hide(modal.id);
-    return modal.render({ id: modal.id, hide: hideModal, visible: modal.visible });
-  }}
-      </For4>
-    </SSModalsContext.Provider>;
-}
-
-// src/components/SSShell.tsx
-import { createContext as createContext3, createMemo as createMemo4, createSignal as createSignal8, createUniqueId as createUniqueId3, onCleanup as onCleanup6, onMount as onMount4, useContext as useContext3 } from "solid-js";
-import { useLocation as useLocation2 } from "@solidjs/router";
-var SSShellContext = createContext3();
-function SSShell(props) {
-  const drawerId = createUniqueId3();
-  const location = useLocation2();
-  const [hrefs, setHrefs] = createSignal8([]);
-  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 = createMemo4(() => {
-    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 <SSShellContext.Provider value={{ closeDrawer, activeHref, registerHref, unregisterHref }}>
-      <div class={`ss_shell ${props.class ?? ""}`} style={props.style}>
-        <input id={drawerId} type="checkbox" class="ss_shell__drawer_toggle_input" />
-
-      <header class="ss_shell__header">
-        <div class="ss_shell__header_left">
-          <label
-    for={drawerId}
-    class="ss_shell__drawer_toggle ss_button ss_button--icon"
-    aria-label="Navigation öffnen"
-    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 d="M4 6l16 0" /><path d="M4 12l16 0" /><path d="M4 18l16 0" /></svg>
-          </label>
-          <div class="ss_shell__title">{props.title}</div>
-        </div>
-        <div class="ss_shell__actions">{props.actions}</div>
-      </header>
-
-        <div class="ss_shell__body">
-          <nav class="ss_shell__nav" aria-label="Hauptnavigation">
-            <div class="ss_shell__nav_inner">{props.nav}</div>
-          </nav>
-          <div class="ss_shell__main">{props.children}</div>
-          <label for={drawerId} class="ss_shell__scrim" aria-label="Navigation schließen" />
-        </div>
-      </div>
-    </SSShellContext.Provider>;
-}
-SSShell.Nav = function(props) {
-  return <div class="ss_shell__nav_list">{props.children}</div>;
-};
-SSShell.NavLink = function(props) {
-  const context = useContext3(SSShellContext);
-  onMount4(() => context?.registerHref(props.href));
-  onCleanup6(() => context?.unregisterHref(props.href));
-  const isActive = () => context?.activeHref() === props.href;
-  return <a
-    class="ss_shell__nav_item"
-    classList={{ "ss_shell__nav_item--active": isActive() }}
-    href={props.href}
-    onclick={() => {
-      props.onclick?.();
-      context?.closeDrawer();
-    }}
-  >
-      {props.icon && <span class="ss_shell__nav_icon">{props.icon}</span>}
-      <span class="ss_shell__nav_label">{props.children}</span>
-    </a>;
-};
-SSShell.NavAction = function(props) {
-  const context = useContext3(SSShellContext);
-  return <button
-    type="button"
-    class="ss_shell__nav_item"
-    onclick={() => {
-      props.onclick();
-      context?.closeDrawer();
-    }}
-  >
-      {props.icon && <span class="ss_shell__nav_icon">{props.icon}</span>}
-      <span class="ss_shell__nav_label">{props.children}</span>
-    </button>;
-};
-SSShell.NavGroup = function(props) {
-  return <details class="ss_shell__nav_group" open={props.initiallyExpanded}>
-      <summary class="ss_shell__nav_group_header">
-        {props.icon && <span class="ss_shell__nav_icon">{props.icon}</span>}
-        <span class="ss_shell__nav_label">{props.title}</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 d="M9 6l6 6l-6 6" /></svg>
-        </span>
-      </summary>
-      <div class="ss_shell__nav_group_items">{props.children}</div>
-    </details>;
-};
-
-// src/components/SSSurface.tsx
-function SSSurface(props) {
-  return <div class={`ss_surface ${props.class ?? ""}`} style={props.style}>
-      {props.children}
-    </div>;
-}
-
-// src/components/SSTile.tsx
-import { A } from "@solidjs/router";
-function SSTile(props) {
-  return <div class={`ss_tile ${props.class ?? ""}`} style={props.style}>
-      <div class="ss_tile__row">
-        {props.icon && <span class="ss_tile__icon">{props.icon}</span>}
-        <div class="ss_tile__content">
-          {props.href ? <h5 class="ss_tile__title">
-              <A class="ss_tile__link" href={props.href} onclick={props.onLinkClick}>
-                {props.title}
-              </A>
-            </h5> : <h5 class="ss_tile__title">
-              <span class="ss_tile__text">{props.title}</span>
-            </h5>}
-          {props.subtitle && <div class="ss_tile__subtitle">{props.subtitle}</div>}
-        </div>
-        {props.trailing && <div class="ss_tile__trailing">{props.trailing}</div>}
-      </div>
-    </div>;
-}
-function createSSTile(build) {
-  return function(props) {
-    const built = build(props.data);
-    return <SSTile
-      {...built}
-      onLinkClick={props.onLinkClick ?? built.onLinkClick}
-      href={props.noLink ? void 0 : built.href}
-      icon={props.noIcon ? void 0 : built.icon}
-    />;
-  };
-}
-export {
-  SSButton,
-  SSCallout,
-  SSChip,
-  SSDataTable,
-  SSDropdown,
-  SSExpandable,
-  SSForm,
-  SSHeader,
-  SSModal,
-  SSModalsProvider,
-  SSShell,
-  SSSurface,
-  SSTile,
-  createSSTile,
-  useSSModals
-};