@sortsys/ui 0.1.6 → 0.1.7

package/dist/dev.jsx

@@ -1,328 +1,1607 @@
-function Y(e){let t=()=>["ss_button",e.isIconOnly?"ss_button--icon":"",e.class??""].filter(Boolean).join(" ");return<button type={e.type??"button"}class={t()}disabled={e.disabled}aria-label={e.ariaLabel}form={e.form}onclick={e.onclick}>
-      {e.children}
-    </button>}function Ut(e){let{icon:t,color:n,class:r,style:o,children:s,...l}=e;return<div{...l}class={`ss_callout ss_callout--${n} ${r??""}`}style={o}>
+// 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">
-        {t}
+        {icon}
       </span>
       <div class="ss_callout__content">
-        <span>{s}</span>
+        <span>{children2}</span>
       </div>
-    </div>}function zt(e){let t=`ss_chip ss_chip--${e.color??"blue"} ${e.class??""}`;return"onclick"in e&&e.onclick?<button type="button"class={`${t} ss_chip--clickable`}style={e.style}onclick={e.onclick}>
-        <span class="ss_chip__label">{e.children}</span>
-      </button>:<div class={t}style={e.style}>
-      <span class="ss_chip__label">{e.children}</span>
-      {"ondismiss"in e&&e.ondismiss&&<button type="button"class="ss_chip__dismiss"aria-label="Entfernen"onclick={e.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>
+    </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>}var T={context:void 0,registry:void 0,effects:void 0,done:!1,getContextId(){return dt(this.context.count)},getNextContextId(){return dt(this.context.count++)}};function dt(e){let t=String(e),n=t.length-1;return T.context.id+(n?String.fromCharCode(96+n):"")+t}function Kt(e){T.context=e}var Wt=!1,Yt=(e,t)=>e===t,Xe=Symbol("solid-proxy"),pt=typeof Proxy=="function",yt=Symbol("solid-track");var qe={equals:Yt},ft=null,vt=Pt,z=1,Fe=2,St={owned:null,cleanups:null,context:null,owner:null},tt={},C=null,h=null,Pe=null,ke=null,O=null,$=null,j=null,Ue=0;function Ee(e,t){let n=O,r=C,o=e.length===0,s=t===void 0?r:t,l=o?St:{owned:null,cleanups:null,context:s?s.context:null,owner:s},i=o?e:()=>e(()=>V(()=>ee(l)));C=l,O=null;try{return U(i,!0)}finally{O=n,C=r}}function S(e,t){t=t?Object.assign({},qe,t):qe;let n={value:e,observers:null,observerSlots:null,comparator:t.equals||void 0},r=o=>(typeof o=="function"&&(h&&h.running&&h.sources.has(n)?o=o(n.tValue):o=o(n.value)),Et(n,o));return[kt.bind(n),r]}function ht(e,t,n){let r=Ke(e,t,!0,z);Pe&&h&&h.running?$.push(r):Te(r)}function G(e,t,n){let r=Ke(e,t,!1,z);Pe&&h&&h.running?$.push(r):Te(r)}function N(e,t,n){vt=en;let r=Ke(e,t,!1,z),o=De&&B(De);o&&(r.suspense=o),(!n||!n.render)&&(r.user=!0),j?j.push(r):Te(r)}function D(e,t,n){n=n?Object.assign({},qe,n):qe;let r=Ke(e,t,!0,0);return r.observers=null,r.observerSlots=null,r.comparator=n.equals||void 0,Pe&&h&&h.running?(r.tState=z,$.push(r)):Te(r),kt.bind(r)}function Gt(e){return e&&typeof e=="object"&&"then"in e}function ot(e,t,n){let r,o,s;typeof t=="function"?(r=e,o=t,s=n||{}):(r=!0,o=e,s=t||{});let l=null,i=tt,c=null,d=!1,u=!1,a="initialValue"in s,m=typeof r=="function"&&D(r),b=new Set,[x,y]=(s.storage||S)(s.initialValue),[k,E]=S(void 0),[L,g]=S(void 0,{equals:!1}),[p,f]=S(a?"ready":"unresolved");T.context&&(c=T.getNextContextId(),s.ssrLoadFrom==="initial"?i=s.initialValue:T.load&&T.has(c)&&(i=T.load(c)));function v(_,P,I,H){return l===_&&(l=null,H!==void 0&&(a=!0),(_===i||P===i)&&s.onHydrated&&queueMicrotask(()=>s.onHydrated(H,{value:P})),i=tt,h&&_&&d?(h.promises.delete(_),d=!1,U(()=>{h.running=!0,F(P,I)},!1)):F(P,I)),P}function F(_,P){U(()=>{P===void 0&&y(()=>_),f(P!==void 0?"errored":a?"ready":"unresolved"),E(P);for(let I of b.keys())I.decrement();b.clear()},!1)}function A(){let _=De&&B(De),P=x(),I=k();if(I!==void 0&&!l)throw I;return O&&!O.user&&_&&ht(()=>{L(),l&&(_.resolved&&h&&d?h.promises.add(l):b.has(_)||(_.increment(),b.add(_)))}),P}function w(_=!0){if(_!==!1&&u)return;u=!1;let P=m?m():r;if(d=h&&h.running,P==null||P===!1){v(l,V(x));return}h&&l&&h.promises.delete(l);let I,H=i!==tt?i:V(()=>{try{return o(P,{value:x(),refetching:_})}catch(xe){I=xe}});if(I!==void 0){v(l,void 0,Ve(I),P);return}else if(!Gt(H))return v(l,H,void 0,P),H;return l=H,"v"in H?(H.s===1?v(l,H.v,void 0,P):v(l,void 0,Ve(H.v),P),H):(u=!0,queueMicrotask(()=>u=!1),U(()=>{f(a?"refreshing":"pending"),g()},!1),H.then(xe=>v(H,xe,void 0,P),xe=>v(H,void 0,Ve(xe),P)))}Object.defineProperties(A,{state:{get:()=>p()},error:{get:()=>k()},loading:{get(){let _=p();return _==="pending"||_==="refreshing"}},latest:{get(){if(!a)return A();let _=k();if(_&&!l)throw _;return x()}}});let M=C;return m?ht(()=>(M=C,w(!1))):w(!1),[A,{refetch:_=>ze(M,()=>w(_)),mutate:y}]}function V(e){if(!ke&&O===null)return e();let t=O;O=null;try{return ke?ke.untrack(e):e()}finally{O=t}}function X(e){N(()=>V(e))}function R(e){return C===null||(C.cleanups===null?C.cleanups=[e]:C.cleanups.push(e)),e}function _t(){return O}function Ce(){return C}function ze(e,t){let n=C,r=O;C=e,O=null;try{return U(t,!0)}catch(o){We(o)}finally{C=n,O=r}}function $e(e){if(h&&h.running)return e(),h.done;let t=O,n=C;return Promise.resolve().then(()=>{O=t,C=n;let r;return(Pe||De)&&(r=h||(h={sources:new Set,effects:[],promises:new Set,disposed:new Set,queue:new Set,running:!0}),r.done||(r.done=new Promise(o=>r.resolve=o)),r.running=!0),U(e,!1),O=C=null,r?r.done:void 0})}var[Lr,mt]=S(!1);function Z(e,t){let n=Symbol("context");return{id:n,Provider:tn(n),defaultValue:e}}function B(e){let t;return C&&C.context&&(t=C.context[e.id])!==void 0?t:e.defaultValue}function xt(e){let t=D(e),n=D(()=>rt(t()));return n.toArray=()=>{let r=n();return Array.isArray(r)?r:r!=null?[r]:[]},n}var De;function kt(){let e=h&&h.running;if(this.sources&&(e?this.tState:this.state))if((e?this.tState:this.state)===z)Te(this);else{let t=$;$=null,U(()=>Je(this),!1),$=t}if(O){let t=this.observers?this.observers.length:0;O.sources?(O.sources.push(this),O.sourceSlots.push(t)):(O.sources=[this],O.sourceSlots=[t]),this.observers?(this.observers.push(O),this.observerSlots.push(O.sources.length-1)):(this.observers=[O],this.observerSlots=[O.sources.length-1])}return e&&h.sources.has(this)?this.tValue:this.value}function Et(e,t,n){let r=h&&h.running&&h.sources.has(e)?e.tValue:e.value;if(!e.comparator||!e.comparator(r,t)){if(h){let o=h.running;(o||!n&&h.sources.has(e))&&(h.sources.add(e),e.tValue=t),o||(e.value=t)}else e.value=t;e.observers&&e.observers.length&&U(()=>{for(let o=0;o<e.observers.length;o+=1){let s=e.observers[o],l=h&&h.running;l&&h.disposed.has(s)||((l?!s.tState:!s.state)&&(s.pure?$.push(s):j.push(s),s.observers&&Ct(s)),l?s.tState=z:s.state=z)}if($.length>1e6)throw $=[],new Error},!1)}return t}function Te(e){if(!e.fn)return;ee(e);let t=Ue;gt(e,h&&h.running&&h.sources.has(e)?e.tValue:e.value,t),h&&!h.running&&h.sources.has(e)&&queueMicrotask(()=>{U(()=>{h&&(h.running=!0),O=C=e,gt(e,e.tValue,t),O=C=null},!1)})}function gt(e,t,n){let r,o=C,s=O;O=C=e;try{r=e.fn(t)}catch(l){return e.pure&&(h&&h.running?(e.tState=z,e.tOwned&&e.tOwned.forEach(ee),e.tOwned=void 0):(e.state=z,e.owned&&e.owned.forEach(ee),e.owned=null)),e.updatedAt=n+1,We(l)}finally{O=s,C=o}(!e.updatedAt||e.updatedAt<=n)&&(e.updatedAt!=null&&"observers"in e?Et(e,r,!0):h&&h.running&&e.pure?(h.sources.add(e),e.tValue=r):e.value=r,e.updatedAt=n)}function Ke(e,t,n,r=z,o){let s={fn:e,state:r,updatedAt:null,owned:null,sources:null,sourceSlots:null,cleanups:null,value:t,owner:C,context:C?C.context:null,pure:n};if(h&&h.running&&(s.state=0,s.tState=r),C===null||C!==St&&(h&&h.running&&C.pure?C.tOwned?C.tOwned.push(s):C.tOwned=[s]:C.owned?C.owned.push(s):C.owned=[s]),ke&&s.fn){let[l,i]=S(void 0,{equals:!1}),c=ke.factory(s.fn,i);R(()=>c.dispose());let d=()=>$e(i).then(()=>u.dispose()),u=ke.factory(s.fn,d);s.fn=a=>(l(),h&&h.running?u.track(a):c.track(a))}return s}function Ie(e){let t=h&&h.running;if((t?e.tState:e.state)===0)return;if((t?e.tState:e.state)===Fe)return Je(e);if(e.suspense&&V(e.suspense.inFallback))return e.suspense.effects.push(e);let n=[e];for(;(e=e.owner)&&(!e.updatedAt||e.updatedAt<Ue);){if(t&&h.disposed.has(e))return;(t?e.tState:e.state)&&n.push(e)}for(let r=n.length-1;r>=0;r--){if(e=n[r],t){let o=e,s=n[r+1];for(;(o=o.owner)&&o!==s;)if(h.disposed.has(o))return}if((t?e.tState:e.state)===z)Te(e);else if((t?e.tState:e.state)===Fe){let o=$;$=null,U(()=>Je(e,n[0]),!1),$=o}}}function U(e,t){if($)return e();let n=!1;t||($=[]),j?n=!0:j=[],Ue++;try{let r=e();return Qt(n),r}catch(r){n||(j=null),$=null,We(r)}}function Qt(e){if($&&(Pe&&h&&h.running?Zt($):Pt($),$=null),e)return;let t;if(h){if(!h.promises.size&&!h.queue.size){let r=h.sources,o=h.disposed;j.push.apply(j,h.effects),t=h.resolve;for(let s of j)"tState"in s&&(s.state=s.tState),delete s.tState;h=null,U(()=>{for(let s of o)ee(s);for(let s of r){if(s.value=s.tValue,s.owned)for(let l=0,i=s.owned.length;l<i;l++)ee(s.owned[l]);s.tOwned&&(s.owned=s.tOwned),delete s.tValue,delete s.tOwned,s.tState=0}mt(!1)},!1)}else if(h.running){h.running=!1,h.effects.push.apply(h.effects,j),j=null,mt(!0);return}}let n=j;j=null,n.length&&U(()=>vt(n),!1),t&&t()}function Pt(e){for(let t=0;t<e.length;t++)Ie(e[t])}function Zt(e){for(let t=0;t<e.length;t++){let n=e[t],r=h.queue;r.has(n)||(r.add(n),Pe(()=>{r.delete(n),U(()=>{h.running=!0,Ie(n)},!1),h&&(h.running=!1)}))}}function en(e){let t,n=0;for(t=0;t<e.length;t++){let r=e[t];r.user?e[n++]=r:Ie(r)}if(T.context){if(T.count){T.effects||(T.effects=[]),T.effects.push(...e.slice(0,n));return}Kt()}for(T.effects&&(T.done||!T.count)&&(e=[...T.effects,...e],n+=T.effects.length,delete T.effects),t=0;t<n;t++)Ie(e[t])}function Je(e,t){let n=h&&h.running;n?e.tState=0:e.state=0;for(let r=0;r<e.sources.length;r+=1){let o=e.sources[r];if(o.sources){let s=n?o.tState:o.state;s===z?o!==t&&(!o.updatedAt||o.updatedAt<Ue)&&Ie(o):s===Fe&&Je(o,t)}}}function Ct(e){let t=h&&h.running;for(let n=0;n<e.observers.length;n+=1){let r=e.observers[n];(t?!r.tState:!r.state)&&(t?r.tState=Fe:r.state=Fe,r.pure?$.push(r):j.push(r),r.observers&&Ct(r))}}function ee(e){let t;if(e.sources)for(;e.sources.length;){let n=e.sources.pop(),r=e.sourceSlots.pop(),o=n.observers;if(o&&o.length){let s=o.pop(),l=n.observerSlots.pop();r<o.length&&(s.sourceSlots[l]=r,o[r]=s,n.observerSlots[r]=l)}}if(e.tOwned){for(t=e.tOwned.length-1;t>=0;t--)ee(e.tOwned[t]);delete e.tOwned}if(h&&h.running&&e.pure)Tt(e,!0);else if(e.owned){for(t=e.owned.length-1;t>=0;t--)ee(e.owned[t]);e.owned=null}if(e.cleanups){for(t=e.cleanups.length-1;t>=0;t--)e.cleanups[t]();e.cleanups=null}h&&h.running?e.tState=0:e.state=0}function Tt(e,t){if(t||(e.tState=0,h.disposed.add(e)),e.owned)for(let n=0;n<e.owned.length;n++)Tt(e.owned[n])}function Ve(e){return e instanceof Error?e:new Error(typeof e=="string"?e:"Unknown error",{cause:e})}function bt(e,t,n){try{for(let r of t)r(e)}catch(r){We(r,n&&n.owner||null)}}function We(e,t=C){let n=ft&&t&&t.context&&t.context[ft],r=Ve(e);if(!n)throw r;j?j.push({fn(){bt(r,n,t)},state:z}):bt(r,n,t)}function rt(e){if(typeof e=="function"&&!e.length)return rt(e());if(Array.isArray(e)){let t=[];for(let n=0;n<e.length;n++){let r=rt(e[n]);Array.isArray(r)?t.push.apply(t,r):t.push(r)}return t}return e}function tn(e,t){return function(r){let o;return G(()=>o=V(()=>(C.context={...C.context,[e]:r.value},xt(()=>r.children))),void 0),o}}var nn=Symbol("fallback");function wt(e){for(let t=0;t<e.length;t++)e[t]()}function rn(e,t,n={}){let r=[],o=[],s=[],l=0,i=t.length>1?[]:null;return R(()=>wt(s)),()=>{let c=e()||[],d=c.length,u,a;return c[yt],V(()=>{let b,x,y,k,E,L,g,p,f;if(d===0)l!==0&&(wt(s),s=[],r=[],o=[],l=0,i&&(i=[])),n.fallback&&(r=[nn],o[0]=Ee(v=>(s[0]=v,n.fallback())),l=1);else if(l===0){for(o=new Array(d),a=0;a<d;a++)r[a]=c[a],o[a]=Ee(m);l=d}else{for(y=new Array(d),k=new Array(d),i&&(E=new Array(d)),L=0,g=Math.min(l,d);L<g&&r[L]===c[L];L++);for(g=l-1,p=d-1;g>=L&&p>=L&&r[g]===c[p];g--,p--)y[p]=o[g],k[p]=s[g],i&&(E[p]=i[g]);for(b=new Map,x=new Array(p+1),a=p;a>=L;a--)f=c[a],u=b.get(f),x[a]=u===void 0?-1:u,b.set(f,a);for(u=L;u<=g;u++)f=r[u],a=b.get(f),a!==void 0&&a!==-1?(y[a]=o[u],k[a]=s[u],i&&(E[a]=i[u]),a=x[a],b.set(f,a)):s[u]();for(a=L;a<d;a++)a in y?(o[a]=y[a],s[a]=k[a],i&&(i[a]=E[a],i[a](a))):o[a]=Ee(m);o=o.slice(0,l=d),r=c.slice(0)}return o});function m(b){if(s[a]=b,i){let[x,y]=S(a);return i[a]=y,t(c[a],x)}return t(c[a])}}}function je(){return!0}var st={get(e,t,n){return t===Xe?n:e.get(t)},has(e,t){return t===Xe?!0:e.has(t)},set:je,deleteProperty:je,getOwnPropertyDescriptor(e,t){return{configurable:!0,enumerable:!0,get(){return e.get(t)},set:je,deleteProperty:je}},ownKeys(e){return e.keys()}};function nt(e){return(e=typeof e=="function"?e():e)?e:{}}function sn(){for(let e=0,t=this.length;e<t;++e){let n=this[e]();if(n!==void 0)return n}}function He(...e){let t=!1;for(let l=0;l<e.length;l++){let i=e[l];t=t||!!i&&Xe in i,e[l]=typeof i=="function"?(t=!0,D(i)):i}if(pt&&t)return new Proxy({get(l){for(let i=e.length-1;i>=0;i--){let c=nt(e[i])[l];if(c!==void 0)return c}},has(l){for(let i=e.length-1;i>=0;i--)if(l in nt(e[i]))return!0;return!1},keys(){let l=[];for(let i=0;i<e.length;i++)l.push(...Object.keys(nt(e[i])));return[...new Set(l)]}},st);let n={},r=Object.create(null);for(let l=e.length-1;l>=0;l--){let i=e[l];if(!i)continue;let c=Object.getOwnPropertyNames(i);for(let d=c.length-1;d>=0;d--){let u=c[d];if(u==="__proto__"||u==="constructor")continue;let a=Object.getOwnPropertyDescriptor(i,u);if(!r[u])r[u]=a.get?{enumerable:!0,configurable:!0,get:sn.bind(n[u]=[a.get.bind(i)])}:a.value!==void 0?a:void 0;else{let m=n[u];m&&(a.get?m.push(a.get.bind(i)):a.value!==void 0&&m.push(()=>a.value))}}}let o={},s=Object.keys(r);for(let l=s.length-1;l>=0;l--){let i=s[l],c=r[i];c&&c.get?Object.defineProperty(o,i,c):o[i]=c?c.value:void 0}return o}function it(e,...t){let n=t.length;if(pt&&Xe in e){let o=n>1?t.flat():t[0],s=t.map(l=>new Proxy({get(i){return l.includes(i)?e[i]:void 0},has(i){return l.includes(i)&&i in e},keys(){return l.filter(i=>i in e)}},st));return s.push(new Proxy({get(l){return o.includes(l)?void 0:e[l]},has(l){return o.includes(l)?!1:l in e},keys(){return Object.keys(e).filter(l=>!o.includes(l))}},st)),s}let r=[];for(let o=0;o<=n;o++)r[o]={};for(let o of Object.getOwnPropertyNames(e)){let s=n;for(let c=0;c<t.length;c++)if(t[c].includes(o)){s=c;break}let l=Object.getOwnPropertyDescriptor(e,o);!l.get&&!l.set&&l.enumerable&&l.writable&&l.configurable?r[s][o]=l.value:Object.defineProperty(r[s],o,l)}return r}var on=0;function Q(){return T.context?T.getNextContextId():`cl-${on++}`}var ln=e=>`Stale read from <${e}>.`;function K(e){let t="fallback"in e&&{fallback:()=>e.fallback};return D(rn(()=>e.each,e.children,t||void 0))}function Se(e){let t=e.keyed,n=D(()=>e.when,void 0,void 0),r=t?n:D(n,void 0,{equals:(o,s)=>!o==!s});return D(()=>{let o=r();if(o){let s=e.children;return typeof s=="function"&&s.length>0?V(()=>s(t?o:()=>{if(!V(r))throw ln("Show");return n()})):s}return e.fallback},void 0,void 0)}function Sn(e){let t=D(()=>e.render(e.row)),[n]=ot(async()=>{let r=t();return r&&typeof r.then=="function"?await r:null});return<div>
-      {(()=>{let r=t();return r&&typeof r.then=="function"?n()??"":r})()}
-    </div>}function _n(e){let[t,n]=S(-1),[r,o]=S(null),[s,l]=S(1),i=()=>Math.max(1,e.pageSize??25),c=D(()=>{let k=t(),E=r();if(k<0||!E)return e.rows;let L=e.columns[k];if(!L?.sortKey)return e.rows;let g=e.rows.map((p,f)=>({row:p,idx:f,key:L.sortKey(p)}));return g.sort((p,f)=>p.key===f.key?p.idx-f.idx:p.key<f.key?E==="asc"?-1:1:E==="asc"?1:-1),g.map(p=>p.row)}),d=D(()=>Math.max(1,Math.ceil(c().length/i()))),u=D(()=>{let E=(Math.min(s(),d())-1)*i();return c().slice(E,E+i())});N(()=>{s()>d()&&l(d())});let a=k=>{if(t()!==k){n(k),o("asc"),l(1);return}if(r()==="asc"){o("desc");return}if(r()==="desc"){n(-1),o(null),l(1);return}o("asc"),l(1)},m=k=>{let E=Math.min(Math.max(1,k),d());l(E)},b=()=>e.paginationPosition??"bottom",x=()=>`ss_table ${b()==="top"?"ss_table--pagination-top":""} ${e.class??""}`,y=()=><div class="ss_table__pagination">
-      <button type="button"class="ss_table__page_button"disabled={s()===1}aria-label="Erste Seite"onclick={()=>m(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>
+    </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={s()===1}aria-label="Vorherige Seite"onclick={()=>m(s()-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
+    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 {s()} von {d()}
+        Seite {page()} von {totalPages()}
       </span>
-      <button type="button"class="ss_table__page_button"disabled={s()===d()}aria-label="Nächste Seite"onclick={()=>m(s()+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
+    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={s()===d()}aria-label="Letzte Seite"onclick={()=>m(d())}>
-        <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
+    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={x()}style={e.style}>
-      {b()==="top"&&y()}
+    </div>;
+  return <div class={containerClass()} style={props.style}>
+      {paginationPosition() === "top" && paginationBar()}
       <div class="ss_table__scroll">
         <table>
         <thead>
           <tr>
-            <K each={e.columns}>
-              {(k,E)=>{let L=!!k.sortKey,g=()=>t()===E(),p=()=>g()?r():null;return<th>
-                    {L?<button type="button"class="ss_table__sort_button"aria-sort={p()==="asc"?"ascending":p()==="desc"?"descending":"none"}data-sort={p()??"none"}onclick={()=>a(E())}>
-                        {k.label}
-                        <span class="ss_table__sort_icon"aria-hidden="true">
-                          {p()==="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>:p()==="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>}
+            <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">{k.label}</span>}
-                  </th>}}
-            </K>
+                      </button> : <span class="ss_table__header_label">{column.label}</span>}
+                  </th>;
+  }}
+            </For>
           </tr>
         </thead>
         <tbody>
-          <K each={u()}>
-            {k=><tr data-clickable={e.onRowClick?"true":void 0}onclick={()=>e.onRowClick?.(k)}>
-                <K each={e.columns}>
-                  {E=><td>
-                      <Sn row={k}render={E.render}/>
+          <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>}
-                </K>
+                </For>
               </tr>}
-          </K>
+          </For>
         </tbody>
         </table>
       </div>
-      {b()==="bottom"&&y()}
-    </div>}function xn(e){let[t,n]=S(!1),[r,o]=S(!1),[s,l]=S("closed"),i,c=()=>n(!1);return N(()=>{if(t()){o(!0),requestAnimationFrame(()=>l("open"));return}if(!r())return;l("closed");let d=window.setTimeout(()=>o(!1),160);R(()=>window.clearTimeout(d))}),X(()=>{let d=a=>{let m=a.target;!i||!m||i.contains(m)||c()},u=a=>{a.key==="Escape"&&c()};document.addEventListener("mousedown",d),window.addEventListener("keydown",u),R(()=>{document.removeEventListener("mousedown",d),window.removeEventListener("keydown",u)})}),<div class={`ss_dropdown ${e.class??""}`}style={e.style}ref={d=>i=d}>
-      <button type="button"class="ss_dropdown__trigger ss_button ss_button--icon"aria-haspopup="menu"aria-expanded={t()}aria-label={e.ariaLabel??"Aktionen \xF6ffnen"}onclick={()=>n(d=>!d)}>
-        {e.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>}
+      {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>
 
-      <Se when={r()}>
-        <div class="ss_dropdown__menu"role="menu"data-state={s()}>
-          <K each={e.items}>
-            {d=><button type="button"class="ss_dropdown__item"role={d.checked?"menuitemcheckbox":"menuitem"}aria-checked={d.checked?"true":void 0}onclick={async()=>{c(),await d.onclick?.()}}>
-                <span class="ss_dropdown__item_icon">{d.icon}</span>
-                <span class="ss_dropdown__item_label">{d.label}</span>
-                {d.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>
+      <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>}
-          </K>
+          </For2>
         </div>
-      </Se>
-    </div>}var Mt=200;function kn(e){let[t,n]=S(e.initiallyExpanded?"auto":0),r=D(()=>t()!==0),o,s,l=()=>{s&&clearTimeout(s);let i=o?.scrollHeight??0;if(r()){n(i),s=window.setTimeout(()=>n(0),1);return}n(i),s=window.setTimeout(()=>n("auto"),Mt)};return R(()=>{s&&clearTimeout(s)}),<div class={`ss_expandable ${e.class??""}`}style={e.style}data-state={r()?"open":"closed"}>
-      <div class="ss_expandable__header"role="button"tabindex="0"aria-expanded={r()}onclick={l}onkeydown={i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),l())}}>
-        <span class="ss_expandable__icon"aria-hidden="true">
-          {r()?<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>}
+      </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">{e.title}</span>
+        <span class="ss_expandable__title">{props.title}</span>
       </div>
 
-      <div ref={i=>o=i}class="ss_expandable__content"style={{height:typeof t()=="number"?`${t()}px`:t(),"transition-duration":`${Mt}ms`}}>
+      <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"/>
-          {e.children}
+          <div class="ss_expandable__divider" />
+          {props.children}
         </div>
       </div>
-    </div>}function Ye(){let[e,t]=S(!1);return[e,async n=>{if(!e())try{t(!0),await n()}finally{t(!1)}}]}var _e=Z(),J=function(e){let[t,n]=Ye(),r={},o={loading:t,process:s=>n(()=>s(o)),field:s=>r[s]??null,setField:(s,l)=>{r[s]=l},delField:s=>{delete r[s]},setValues:s=>Object.entries(s).forEach(([l,i])=>r[l]?.setValue(i)),getValues:async()=>{let s=Object.entries(r),l=await Promise.all(s.map(([,i])=>i.getValue()));return Object.fromEntries(s.map(([i],c)=>[i,l[c]]))},validate:()=>Promise.all(Object.values(r).map(s=>s.validate())).then(),hasError:()=>Object.values(r).some(s=>s.hasError()),submit:()=>n(async()=>{await o.validate(),!o.hasError()&&await e.onsubmit?.(o)})};return<form class="ss_form"onsubmit={s=>{s.preventDefault(),o.submit()}}>
-    <_e.Provider value={o}>
-      {e.children}
-    </_e.Provider>
-  </form>};J.Input=function(e){let t=B(_e),[n,r]=S(""),[o,s]=S(null),l={getValue:()=>{let g=n().trim();return g||null},setValue:g=>{if(typeof g=="number"){r(g.toLocaleString());return}r(`${g}`)},hasError:()=>!!o(),validate:async()=>{let g=[...e.rules??[]];e.required&&g.unshift(J.rules.required);let p=await l.getValue();for(let f of g){let v=await f(p);if(v){s(v);return}}s(null)}};if(e.name&&t){let g=e.name;X(()=>t.setField(g,l)),R(()=>t.delField(g))}let i=null,[c,d]=S([]),[u,a]=S(-1),m;if(e.suggestions){let g=e.suggestions,[p,f]=S(!g.prepare);g.prepare&&X(async()=>{g.prepare&&(i=await g.prepare(),f(!0))});let v;N(()=>{if(clearTimeout(v??void 0),!p())return;d([]);let F=n().trim().toLowerCase();F&&(v=setTimeout(async()=>{let A=await g.getItems({query:F,init:i});d(A)},250))}),R(()=>clearTimeout(v??void 0))}N(()=>{let g=c();if(!g.length){a(-1);return}u()>=g.length&&a(g.length-1)});let b=g=>{let p=m;if(!p||g<0)return;let f=p.querySelectorAll("li")[g];if(!f)return;let v=f.offsetTop,F=v+f.offsetHeight,A=p.scrollTop,w=A+p.clientHeight;v<A?p.scrollTop=v:F>w&&(p.scrollTop=F-p.clientHeight)},x=g=>{let p=c();if(!p.length)return;let f=Math.max(-1,Math.min(u()+g,p.length-1));a(f),b(f)},y=g=>{r(e.suggestions.stringify({item:g,init:i})),a(-1)},k=g=>{if(c().length)if(g.key==="ArrowDown")g.preventDefault(),x(1);else if(g.key==="ArrowUp")g.preventDefault(),x(-1);else if(g.key==="Enter"&&u()>=0){g.preventDefault();let p=c()[u()];p&&y(p)}else g.key==="Escape"&&a(-1)},E=g=>{r(g),a(-1)},L=Q();return<div class="ss_form_input">
-    <label for={e.id||L}>{e.label}</label>
+    </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">
-      {e.textArea?<textarea id={e.id||L}value={n()}oninput={g=>E(g.target.value)}onkeydown={k}disabled={e.disabled||t?.loading()}/>:<input id={e.id||L}value={n()}oninput={g=>E(g.target.value)}onkeydown={k}disabled={e.disabled||t?.loading()}type={e.type}/>}
-
-      {!!c().length&&<ul class="ss__suggestions"ref={g=>m=g}>
-        <K each={c()}>
-          {(g,p)=>{let f=()=>{let v=document.activeElement;v instanceof HTMLElement&&v.blur(),y(g)};return<li onpointerdown={v=>v.preventDefault()}onclick={f}classList={{ss__hovered:p()===u()}}>
-              {e.suggestions.stringify({item:g,init:i})}
-            </li>}}
-        </K>
+      {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>
 
-    {!!o()&&<span role="alert">{o()}</span>}
-  </div>};J.Date=function(e){let t=B(_e),[n,r]=S(""),[o,s]=S(null),[l,i]=S(!1),[c,d]=S(new Date),u,a=f=>`${f}`.padStart(2,"0"),m=f=>{let v=a(f.getDate()),F=a(f.getMonth()+1),A=f.getFullYear();return`${v}.${F}.${A}`},b=f=>{let v=f.trim();if(!v)return null;let F=/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/.exec(v);if(!F)return null;let A=Number(F[1]),w=Number(F[2]),M=Number(F[3]);if(!A||!w)return null;let _=new Date(M,w-1,A);return _.getFullYear()!==M||_.getMonth()!==w-1||_.getDate()!==A?null:_};N(()=>{if(!l())return;let f=b(n());d(f??new Date)});let x={getValue:()=>{let f=n().trim();return f||null},setValue:f=>{if(f instanceof Date){r(m(f));return}r(`${f??""}`)},hasError:()=>!!o(),validate:async()=>{let f=[...e.rules??[]];e.required&&f.unshift(J.rules.required);let v=await x.getValue();for(let F of f){let A=await F(v);if(A){s(A);return}}if(v&&!b(v)){s("Ung\xFCltiges Datum");return}s(null)}};if(e.name&&t){let f=e.name;X(()=>t.setField(f,x)),R(()=>t.delField(f))}let y=Q(),k=f=>{let v=b(n());return v?v.getFullYear()===c().getFullYear()&&v.getMonth()===c().getMonth()&&v.getDate()===f:!1},E=f=>{let v=new Date;return v.getFullYear()===c().getFullYear()&&v.getMonth()===c().getMonth()&&v.getDate()===f},L=()=>{let f=c(),v=f.getFullYear(),F=f.getMonth(),A=new Date(v,F,1),w=new Date(v,F+1,0).getDate(),M=(A.getDay()+6)%7,_=[];for(let P=0;P<M;P+=1)_.push(null);for(let P=1;P<=w;P+=1)_.push(P);for(;_.length%7!==0;)_.push(null);return _},g=()=>c().toLocaleDateString("de-DE",{month:"long",year:"numeric"}),p=f=>{let v=new Date(c().getFullYear(),c().getMonth(),f);r(m(v)),i(!1)};return X(()=>{let f=F=>{if(!l())return;let A=F.target;u&&A&&!u.contains(A)&&i(!1)},v=F=>{F.key==="Escape"&&i(!1)};document.addEventListener("mousedown",f),window.addEventListener("keydown",v),R(()=>{document.removeEventListener("mousedown",f),window.removeEventListener("keydown",v)})}),<div class="ss_form_date"ref={f=>u=f}>
-    <label for={e.id||y}>{e.label}</label>
+    {!!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={e.id||y}value={n()}oninput={f=>r(f.target.value)}onfocus={()=>i(!0)}disabled={e.disabled||t?.loading()}readonly={!e.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={l()}onclick={()=>i(f=>!f)}disabled={e.disabled||t?.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>
+      <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>
 
-    {l()&&<div class="ss_form_date__picker"role="dialog"aria-label="Datum auswählen">
+    {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={()=>{let f=c();d(new Date(f.getFullYear()-1,f.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 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={()=>{let f=c();d(new Date(f.getFullYear(),f.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 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">{g()}</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={()=>{let f=c();d(new Date(f.getFullYear(),f.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 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={()=>{let f=c();d(new Date(f.getFullYear()+1,f.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 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(f=><span>{f}</span>)}
+          {["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"].map((day) => <span>{day}</span>)}
         </div>
         <div class="ss_form_date__grid">
-          {L().map(f=>f?<button type="button"class="ss_form_date__day"classList={{"is-selected":k(f),"is-today":E(f)}}onclick={()=>p(f)}>
-                {f}
-              </button>:<span class="ss_form_date__day is-empty"/>)}
+          {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>}
 
-    {!!o()&&<span role="alert">{o()}</span>}
-  </div>};J.Checkbox=function(e){let t=B(_e),[n,r]=S(!1),[o,s]=S(null),l={getValue:()=>n(),setValue:c=>r(!!c),hasError:()=>!!o(),validate:async()=>{let c=[...e.rules??[]];e.required&&c.unshift(J.rules.required);let d=await l.getValue();for(let u of c){let a=await u(d);if(a){s(a);return}}s(null)}};if(e.name&&t){let c=e.name;X(()=>t.setField(c,l)),R(()=>t.delField(c))}let i=Q();return<div class="ss_form_checkbox">
+    {!!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={e.id||i}type="checkbox"checked={n()}onchange={c=>r(c.target.checked)}disabled={e.disabled||t?.loading()}/>
-      <label for={e.id||i}>{e.label}</label>
+      <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>
 
-    {!!o()&&<span role="alert">{o()}</span>}
-  </div>};J.useContext=function(){let e=B(_e);if(!e)return null;let{setField:t,delField:n,...r}=e;return r};J.Select=function(e){let t=B(_e),[n,r]=S([]),[o,s]=S(null),[l,i]=S(null),c=a=>{let m=a.map(b=>({id:b.id,label:e.buildOption(b)}));if(r(m),!a.length){s(null);return}o()&&m.some(b=>b.id===o())||s(m[0].id)};N(()=>{let a=e.getOptions();"then"in a&&typeof a.then=="function"||a instanceof Promise?a.then(c):c(a)});let d={getValue:()=>{let a=o();return n().some(b=>b.id===a)?a:null},setValue:a=>{let m=n();if(!m.length){s(null);return}let b=m[0].id;if(typeof a!="string"){s(b);return}let x=a.trim();if(!m.some(y=>y.id===x)){s(b);return}s(x)},hasError:()=>!!l(),validate:async()=>{let a=n(),m=await d.getValue();if(!m){i("Pflichtfeld");return}if(!a.some(b=>b.id===m)){i("Option nicht verf\xFCgbar");return}for(let b of e.rules??[]){let x=await b(m);if(x){i(x);return}}i(null)}};if(d.setOptions=c,e.name&&t){let a=e.name;X(()=>t.setField(a,d)),R(()=>t.delField(a))}let u=Q();return<div class="ss_form_select">
-    <label for={e.id||u}>{e.label}</label>
+    {!!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={e.id||u}onchange={a=>s(a.target.value)}disabled={e.disabled||t?.loading()}>
-        <K each={n()}>
-          {a=><option value={a.id}selected={o()===a.id}>{a.label}</option>}
-        </K>
+      <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 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>
 
-    {!!l()&&<span role="alert">{l()}</span>}
-  </div>};J.ACSelect=function(e){let t=B(_e),[n,r]=S(""),[o,s]=S([]),[l,i]=S(null),c={getValue:()=>o(),setValue:w=>s(w),hasError:()=>!!l(),validate:async()=>{let w=await c.getValue(),M=e.minSelectedItems,_=e.maxSelectedItems;if(M&&w.length<M){i(`Mindestens ${M} ${M>1?"Elemente m\xFCssen":"Element muss"} ausgew\xE4hlt werden`);return}if(_&&w.length>_){i(`Maximal ${_} ${_>1?"Elemente d\xFCrfen":"Element darf"} ausgew\xE4hlt werden`);return}for(let P of e.rules??[]){let I=await P(w);if(I){i(I);return}}i(null)}};if(e.name&&t){let w=e.name;X(()=>t.setField(w,c)),R(()=>t.delField(w))}let d=null,[u,a]=S(!e.prepare);e.prepare&&X(async()=>{e.prepare&&(d=await e.prepare(),a(!0))});let[m,b]=S([]),[x,y]=S(-1),k,E;N(()=>{if(!u())return;clearTimeout(E);let w=n().trim().toLowerCase();if(!w){b(V(()=>o()));return}b([]),E=setTimeout(async()=>{let M=await e.getOptions({query:w,init:d});b(M)},250)}),N(()=>{n().trim().toLowerCase()||m().length!==o().length&&b(o())}),R(()=>clearTimeout(E)),N(()=>{let w=m();if(!w.length){y(-1);return}x()>=w.length&&y(w.length-1)});let L=w=>{let M=k;if(!M||w<0)return;let _=M.querySelectorAll("li")[w];if(!_)return;let P=_.offsetTop,I=P+_.offsetHeight,H=M.scrollTop,xe=H+M.clientHeight;P<H?M.scrollTop=P:I>xe&&(M.scrollTop=I-M.clientHeight)},g=w=>{let M=m();if(!M.length)return;let _=Math.max(-1,Math.min(x()+w,M.length-1));y(_),L(_)},p=Q(),f=D(()=>new Set(o().map(({id:w})=>w))),v=(w,M=!0)=>{let _=f().has(w.id);if(e.maxSelectedItems===1){s(_?[]:[w]),r(""),M&&y(-1);return}s(_?P=>P.filter(({id:I})=>I!==w.id):P=>[...P.filter(({id:I})=>I!==w.id),w]),M&&y(-1)},F=w=>{if(m().length)if(w.key==="ArrowDown")w.preventDefault(),g(1);else if(w.key==="ArrowUp")w.preventDefault(),g(-1);else if(w.key==="Enter"&&x()>=0){w.preventDefault();let M=m()[x()];M&&v(M,!1)}else w.key==="Escape"&&y(-1)},A=()=>e.disabled||t?.loading();return<div class="ss_form_ac_select">
-    <label for={e.id||p}>{e.label}</label>
+    {!!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>
 
-    {e.maxSelectedItems===1&&e.renderSelection&&o().length===1?<div class="ss__selection">
+    {props.maxSelectedItems === 1 && !!props.renderSelection && value().length === 1 ? <div class="ss__selection">
         <div class="ss__content">
-          {e.renderSelection({item:o()[0],init:d})}
+          {props.renderSelection({ item: value()[0], init: initData })}
         </div>
-        <button type="button"class="ss__clear"disabled={A()}aria-label="Auswahl entfernen"onclick={()=>{s([]),r(""),setTimeout(()=>document.getElementById(e.id||p)?.focus(),0)}}>
+        <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> : <div class="ss__wrapper">
 
         <div class="ss__input_row">
-          {!!o().length&&<span class="ss__prefix"role="button"tabindex={A()?-1:0}aria-disabled={A()?"true":void 0}onkeydown={w=>{A()||(w.key==="Enter"||w.key===" ")&&(w.preventDefault(),s([]))}}onclick={()=>{A()||s([])}}>
-            {o().length}
+          {!!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={e.id||p}value={n()}oninput={w=>{A()||(r(w.target.value),y(-1))}}onkeydown={F}disabled={A()}/>
+          <input
+    id={props.id || _id}
+    value={query()}
+    oninput={(e) => {
+      if (isDisabled()) return;
+      setQuery(e.target.value);
+      setSuggIndex(-1);
+    }}
+    onkeydown={handleKeyDown}
+    disabled={isDisabled()}
+  />
         </div>
 
-        {!!m().length&&<ul class="ss__suggestions"ref={w=>k=w}>
-          <K each={m()}>
-            {(w,M)=>{let _=()=>{A()||(v(w),document.getElementById(e.id||p)?.focus())};return<li onpointerdown={P=>P.preventDefault()}onclick={_}classList={{ss__selected:f().has(w.id),ss__hovered:M()===x()}}>
-                {e.renderItem({item:w,init:d})}
-              </li>}}
-          </K>
+        {!!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>}
 
-    {!!l()&&<span role="alert">{l()}</span>}
-  </div>};J.SubmitButton=function(e){let t=B(_e);return<div>
-    <Y type="submit"class="ss_form_submit"disabled={e.disabled||t?.loading()}>
-      {e.children}
-    </Y>
-  </div>};J.rules={required:e=>e?null:"Pflichtfeld",minLength:e=>t=>{if(t===null&&(t=""),typeof t!="string")throw new Error(`invalid rule minLength(..) for non-string value ${t}`);return t.length<e?`Mindestens ${e} Zeichen`:null},maxLength:e=>t=>{if(t===null&&(t=""),typeof t!="string")throw new Error(`invalid rule maxLength(..) for non-string value ${t}`);return t.length<e?`Maximal ${e} Zeichen`:null},pattern:e=>t=>{if(t===null&&(t=""),typeof t!="string")throw new Error(`invalid rule pattern(..) for non-string value ${t}`);return e.test(t)?null:"Eingabe widerspricht erwartetem Muster"}};function En(e){return<div class={`ss_header ${e.class??""}`}style={e.style}>
+    {!!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">{e.title}</h3>
-        {e.subtitle&&<h5 class="ss_header__subtitle">{e.subtitle}</h5>}
+        <h3 class="ss_header__title">{props.title}</h3>
+        {props.subtitle && <h5 class="ss_header__subtitle">{props.subtitle}</h5>}
       </div>
-      <div class="ss_header__actions">{e.actions}</div>
-    </div>}var Pn=["allowfullscreen","async","alpha","autofocus","autoplay","checked","controls","default","disabled","formnovalidate","hidden","indeterminate","inert","ismap","loop","multiple","muted","nomodule","novalidate","open","playsinline","readonly","required","reversed","seamless","selected","adauctionheaders","browsingtopics","credentialless","defaultchecked","defaultmuted","defaultselected","defer","disablepictureinpicture","disableremoteplayback","preservespitch","shadowrootclonable","shadowrootcustomelementregistry","shadowrootdelegatesfocus","shadowrootserializable","sharedstoragewritable"],Cn=new Set(["className","value","readOnly","noValidate","formNoValidate","isMap","noModule","playsInline","adAuctionHeaders","allowFullscreen","browsingTopics","defaultChecked","defaultMuted","defaultSelected","disablePictureInPicture","disableRemotePlayback","preservesPitch","shadowRootClonable","shadowRootCustomElementRegistry","shadowRootDelegatesFocus","shadowRootSerializable","sharedStorageWritable",...Pn]),Tn=new Set(["innerHTML","textContent","innerText","children"]),Mn=Object.assign(Object.create(null),{className:"class",htmlFor:"for"}),An=Object.assign(Object.create(null),{class:"className",novalidate:{$:"noValidate",FORM:1},formnovalidate:{$:"formNoValidate",BUTTON:1,INPUT:1},ismap:{$:"isMap",IMG:1},nomodule:{$:"noModule",SCRIPT:1},playsinline:{$:"playsInline",VIDEO:1},readonly:{$:"readOnly",INPUT:1,TEXTAREA:1},adauctionheaders:{$:"adAuctionHeaders",IFRAME:1},allowfullscreen:{$:"allowFullscreen",IFRAME:1},browsingtopics:{$:"browsingTopics",IMG:1},defaultchecked:{$:"defaultChecked",INPUT:1},defaultmuted:{$:"defaultMuted",AUDIO:1,VIDEO:1},defaultselected:{$:"defaultSelected",OPTION:1},disablepictureinpicture:{$:"disablePictureInPicture",VIDEO:1},disableremoteplayback:{$:"disableRemotePlayback",AUDIO:1,VIDEO:1},preservespitch:{$:"preservesPitch",AUDIO:1,VIDEO:1},shadowrootclonable:{$:"shadowRootClonable",TEMPLATE:1},shadowrootdelegatesfocus:{$:"shadowRootDelegatesFocus",TEMPLATE:1},shadowrootserializable:{$:"shadowRootSerializable",TEMPLATE:1},sharedstoragewritable:{$:"sharedStorageWritable",IFRAME:1,IMG:1}});function On(e,t){let n=An[e];return typeof n=="object"?n[t]?n.$:void 0:n}var Ln=new Set(["beforeinput","click","dblclick","contextmenu","focusin","focusout","input","keydown","keyup","mousedown","mousemove","mouseout","mouseover","mouseup","pointerdown","pointermove","pointerout","pointerover","pointerup","touchend","touchmove","touchstart"]);var Rn={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"};function Fn(e,t,n){let r=n.length,o=t.length,s=r,l=0,i=0,c=t[o-1].nextSibling,d=null;for(;l<o||i<s;){if(t[l]===n[i]){l++,i++;continue}for(;t[o-1]===n[s-1];)o--,s--;if(o===l){let u=s<r?i?n[i-1].nextSibling:n[s-i]:c;for(;i<s;)e.insertBefore(n[i++],u)}else if(s===i)for(;l<o;)(!d||!d.has(t[l]))&&t[l].remove(),l++;else if(t[l]===n[s-1]&&n[i]===t[o-1]){let u=t[--o].nextSibling;e.insertBefore(n[i++],t[l++].nextSibling),e.insertBefore(n[--s],u),t[o]=n[s]}else{if(!d){d=new Map;let a=i;for(;a<s;)d.set(n[a],a++)}let u=d.get(t[l]);if(u!=null)if(i<u&&u<s){let a=l,m=1,b;for(;++a<o&&a<s&&!((b=d.get(t[a]))==null||b!==u+m);)m++;if(m>u-i){let x=t[l];for(;i<u;)e.insertBefore(n[i++],x)}else e.replaceChild(n[i++],t[l++])}else l++;else t[l++].remove()}}}var At="_$DX_DELEGATE";function It(e,t,n,r){let o,s=()=>{let i=r?document.createElementNS("http://www.w3.org/1998/Math/MathML","template"):document.createElement("template");return i.innerHTML=e,n?i.content.firstChild.firstChild:r?i.firstChild:i.content.firstChild},l=t?()=>V(()=>document.importNode(o||(o=s()),!0)):()=>(o||(o=s())).cloneNode(!0);return l.cloneNode=l,l}function $t(e,t=window.document){let n=t[At]||(t[At]=new Set);for(let r=0,o=e.length;r<o;r++){let s=e[r];n.has(s)||(n.add(s),t.addEventListener(s,qn))}}function lt(e,t,n){Oe(e)||(n==null?e.removeAttribute(t):e.setAttribute(t,n))}function Dn(e,t,n,r){Oe(e)||(r==null?e.removeAttributeNS(t,n):e.setAttributeNS(t,n,r))}function In(e,t,n){Oe(e)||(n?e.setAttribute(t,""):e.removeAttribute(t))}function $n(e,t){Oe(e)||(t==null?e.removeAttribute("class"):e.className=t)}function Hn(e,t,n,r){if(r)Array.isArray(n)?(e[`$$${t}`]=n[0],e[`$$${t}Data`]=n[1]):e[`$$${t}`]=n;else if(Array.isArray(n)){let o=n[0];e.addEventListener(t,n[0]=s=>o.call(e,n[1],s))}else e.addEventListener(t,n,typeof n!="function"&&n)}function Bn(e,t,n={}){let r=Object.keys(t||{}),o=Object.keys(n),s,l;for(s=0,l=o.length;s<l;s++){let i=o[s];!i||i==="undefined"||t[i]||(Lt(e,i,!1),delete n[i])}for(s=0,l=r.length;s<l;s++){let i=r[s],c=!!t[i];!i||i==="undefined"||n[i]===c||!c||(Lt(e,i,!0),n[i]=c)}return n}function Nn(e,t,n){if(!t)return n?lt(e,"style"):t;let r=e.style;if(typeof t=="string")return r.cssText=t;typeof n=="string"&&(r.cssText=n=void 0),n||(n={}),t||(t={});let o,s;for(s in n)t[s]==null&&r.removeProperty(s),delete n[s];for(s in t)o=t[s],o!==n[s]&&(r.setProperty(s,o),n[s]=o);return n}function Ht(e,t={},n,r){let o={};return r||G(()=>o.children=Ae(e,t.children,o.children)),G(()=>typeof t.ref=="function"&&jn(t.ref,e)),G(()=>Vn(e,t,n,!0,o,!0)),o}function jn(e,t,n){return V(()=>e(t,n))}function Ot(e,t,n,r){if(n!==void 0&&!r&&(r=[]),typeof t!="function")return Ae(e,t,r,n);G(o=>Ae(e,t(),o,n),r)}function Vn(e,t,n,r,o={},s=!1){t||(t={});for(let l in o)if(!(l in t)){if(l==="children")continue;o[l]=Rt(e,l,null,o[l],n,s,t)}for(let l in t){if(l==="children"){r||Ae(e,t.children);continue}let i=t[l];o[l]=Rt(e,l,i,o[l],n,s,t)}}function Oe(e){return!!T.context&&!T.done&&(!e||e.isConnected)}function Xn(e){return e.toLowerCase().replace(/-([a-z])/g,(t,n)=>n.toUpperCase())}function Lt(e,t,n){let r=t.trim().split(/\s+/);for(let o=0,s=r.length;o<s;o++)e.classList.toggle(r[o],n)}function Rt(e,t,n,r,o,s,l){let i,c,d,u,a;if(t==="style")return Nn(e,n,r);if(t==="classList")return Bn(e,n,r);if(n===r)return r;if(t==="ref")s||n(e);else if(t.slice(0,3)==="on:"){let m=t.slice(3);r&&e.removeEventListener(m,r,typeof r!="function"&&r),n&&e.addEventListener(m,n,typeof n!="function"&&n)}else if(t.slice(0,10)==="oncapture:"){let m=t.slice(10);r&&e.removeEventListener(m,r,!0),n&&e.addEventListener(m,n,!0)}else if(t.slice(0,2)==="on"){let m=t.slice(2).toLowerCase(),b=Ln.has(m);if(!b&&r){let x=Array.isArray(r)?r[0]:r;e.removeEventListener(m,x)}(b||n)&&(Hn(e,m,n,b),b&&$t([m]))}else if(t.slice(0,5)==="attr:")lt(e,t.slice(5),n);else if(t.slice(0,5)==="bool:")In(e,t.slice(5),n);else if((a=t.slice(0,5)==="prop:")||(d=Tn.has(t))||!o&&((u=On(t,e.tagName))||(c=Cn.has(t)))||(i=e.nodeName.includes("-")||"is"in l)){if(a)t=t.slice(5),c=!0;else if(Oe(e))return n;t==="class"||t==="className"?$n(e,n):i&&!c&&!d?e[Xn(t)]=n:e[u||t]=n}else{let m=o&&t.indexOf(":")>-1&&Rn[t.split(":")[0]];m?Dn(e,m,t,n):lt(e,Mn[t]||t,n)}return n}function qn(e){if(T.registry&&T.events&&T.events.find(([c,d])=>d===e))return;let t=e.target,n=`$$${e.type}`,r=e.target,o=e.currentTarget,s=c=>Object.defineProperty(e,"target",{configurable:!0,value:c}),l=()=>{let c=t[n];if(c&&!t.disabled){let d=t[`${n}Data`];if(d!==void 0?c.call(t,d,e):c.call(t,e),e.cancelBubble)return}return t.host&&typeof t.host!="string"&&!t.host._$host&&t.contains(e.target)&&s(t.host),!0},i=()=>{for(;l()&&(t=t._$host||t.parentNode||t.host););};if(Object.defineProperty(e,"currentTarget",{configurable:!0,get(){return t||document}}),T.registry&&!T.done&&(T.done=_$HY.done=!0),e.composedPath){let c=e.composedPath();s(c[0]);for(let d=0;d<c.length-2&&(t=c[d],!!l());d++){if(t._$host){t=t._$host,i();break}if(t.parentNode===o)break}}else i();s(r)}function Ae(e,t,n,r,o){let s=Oe(e);if(s){!n&&(n=[...e.childNodes]);let c=[];for(let d=0;d<n.length;d++){let u=n[d];u.nodeType===8&&u.data.slice(0,2)==="!$"?u.remove():c.push(u)}n=c}for(;typeof n=="function";)n=n();if(t===n)return n;let l=typeof t,i=r!==void 0;if(e=i&&n[0]&&n[0].parentNode||e,l==="string"||l==="number"){if(s||l==="number"&&(t=t.toString(),t===n))return n;if(i){let c=n[0];c&&c.nodeType===3?c.data!==t&&(c.data=t):c=document.createTextNode(t),n=Me(e,n,r,c)}else n!==""&&typeof n=="string"?n=e.firstChild.data=t:n=e.textContent=t}else if(t==null||l==="boolean"){if(s)return n;n=Me(e,n,r)}else{if(l==="function")return G(()=>{let c=t();for(;typeof c=="function";)c=c();n=Ae(e,c,n,r)}),()=>n;if(Array.isArray(t)){let c=[],d=n&&Array.isArray(n);if(at(c,t,n,o))return G(()=>n=Ae(e,c,n,r,!0)),()=>n;if(s){if(!c.length)return n;if(r===void 0)return n=[...e.childNodes];let u=c[0];if(u.parentNode!==e)return n;let a=[u];for(;(u=u.nextSibling)!==r;)a.push(u);return n=a}if(c.length===0){if(n=Me(e,n,r),i)return n}else d?n.length===0?Ft(e,c,r):Fn(e,n,c):(n&&Me(e),Ft(e,c));n=c}else if(t.nodeType){if(s&&t.parentNode)return n=i?[t]:t;if(Array.isArray(n)){if(i)return n=Me(e,n,r,t);Me(e,n,null,t)}else n==null||n===""||!e.firstChild?e.appendChild(t):e.replaceChild(t,e.firstChild);n=t}}return n}function at(e,t,n,r){let o=!1;for(let s=0,l=t.length;s<l;s++){let i=t[s],c=n&&n[e.length],d;if(!(i==null||i===!0||i===!1))if((d=typeof i)=="object"&&i.nodeType)e.push(i);else if(Array.isArray(i))o=at(e,i,c)||o;else if(d==="function")if(r){for(;typeof i=="function";)i=i();o=at(e,Array.isArray(i)?i:[i],Array.isArray(c)?c:[c])||o}else e.push(i),o=!0;else{let u=String(i);c&&c.nodeType===3&&c.data===u?e.push(c):e.push(document.createTextNode(u))}}return o}function Ft(e,t,n=null){for(let r=0,o=t.length;r<o;r++)e.insertBefore(t[r],n)}function Me(e,t,n,r){if(n===void 0)return e.textContent="";let o=r||document.createTextNode("");if(t.length){let s=!1;for(let l=t.length-1;l>=0;l--){let i=t[l];if(o!==i){let c=i.parentNode===e;!s&&!l?c?e.replaceChild(o,i):e.insertBefore(o,n):c&&i.remove()}else s=!0}}else e.insertBefore(o,n);return[o]}var Le=()=>{};var W=!1;var Jn="http://www.w3.org/2000/svg";function Un(e,t=!1,n=void 0){return t?document.createElementNS(Jn,e):document.createElement(e,{is:n})}function Bt(e){let{useShadow:t}=e,n=document.createTextNode(""),r=()=>e.mount||document.body,o=Ce(),s,l=!!T.context;return N(()=>{l&&(Ce().user=l=!1),s||(s=ze(o,()=>D(()=>e.children)));let i=r();if(i instanceof HTMLHeadElement){let[c,d]=S(!1),u=()=>d(!0);Ee(a=>Ot(i,()=>c()?a():s(),null)),R(u)}else{let c=Un(e.isSVG?"g":"div",e.isSVG),d=t&&c.attachShadow?c.attachShadow({mode:"open"}):c;Object.defineProperty(c,"_$host",{get(){return n.parentNode},configurable:!0}),Ot(d,s),i.appendChild(c),e.ref&&e.ref(c),R(()=>i.removeChild(c))}},void 0,{render:!l}),n}var zn=180;function Ge(e){let[t,n]=S(e.open),[r,o]=S("closed"),s=Q(),l,i,c;N(()=>{l&&clearTimeout(l),i&&cancelAnimationFrame(i),e.open?(t()||n(!0),o("closed"),i=requestAnimationFrame(()=>o("open"))):(o("closed"),t()&&(l=window.setTimeout(()=>n(!1),zn)))}),X(()=>{if(!e.open)return;if(e.lockScroll!==!1){let a=document.body.style.overflowY;document.body.style.overflowY="hidden",R(()=>{document.body.style.overflowY=a})}i=requestAnimationFrame(()=>c?.focus());let u=a=>{a.key==="Escape"&&e.dismissible!==!1&&e.onClose?.()};window.addEventListener("keydown",u),R(()=>window.removeEventListener("keydown",u))}),R(()=>{l&&clearTimeout(l),i&&cancelAnimationFrame(i)});let d=()=>{e.dismissible!==!1&&e.onClose?.()};return<Se when={t()}>
-      <Bt>
-        <div class="ss_modal"data-state={r()}aria-hidden={r()==="closed"}>
-          <div class="ss_modal__backdrop"onclick={d}/>
-          <div class="ss_modal__panel"classList={{"ss_modal__panel--sm":e.size==="sm","ss_modal__panel--lg":e.size==="lg","ss_modal__panel--fullscreen":e.fullscreen,"ss_modal__panel--no-fullscreen":e.disableResponsiveFullscreen}}ref={u=>c=u}role="dialog"aria-modal="true"aria-labelledby={e.title?s:void 0}tabindex="-1">
-            {(e.title||e.onClose)&&<div class="ss_modal__header">
-                {e.title&&<h2 id={s}class="ss_modal__title">
-                    {e.title}
+      <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>}
-                <Se when={e.onClose}>
-                  <Y type="button"class="ss_modal__close"isIconOnly ariaLabel="Dialog schließen"onclick={()=>{e.dismissible!==!1&&e.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>
-                  </Y>
-                </Se>
+                <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">{e.children}</div>
+              <div class="ss_modal__body_inner">{props.children}</div>
             </div>
 
-            <Se when={e.footer}>
-              <div class="ss_modal__footer">{e.footer}</div>
-            </Se>
+            <Show3 when={props.footer}>
+              <div class="ss_modal__footer">{props.footer}</div>
+            </Show3>
           </div>
         </div>
-      </Bt>
-    </Se>}var Kn;function Wn(){(!window.history.state||window.history.state._depth==null)&&window.history.replaceState({...window.history.state,_depth:window.history.length-1},""),Kn=window.history.state._depth}W||Wn();var Yn=/^\/+|(\/)\/+$/g;function Nt(e,t=!1){let n=e.replace(Yn,"$1");return n?t||/^[?#]/.test(n)?n:"/"+n:""}function Gn(e,t){if(e==null)throw new Error(t);return e}var Qn=Z(),Zn=Z(),Qe=()=>Gn(B(Qn),"<A> and 'use' router primitives can be only used inside a Route."),er=()=>B(Zn)||Qe().base,tr=e=>{let t=er();return D(()=>t.resolvePath(e()))},nr=e=>{let t=Qe();return D(()=>{let n=e();return n!==void 0?t.renderPath(n):n})},Ze=()=>Qe().navigatorFactory(),Re=()=>Qe().location;var rr;function sr(){return rr}var or=!1;function ir(){return or}var lr="Location",ar=5e3,cr=18e4,ct=new Map;W||setInterval(()=>{let e=Date.now();for(let[t,n]of ct.entries())!n[4].count&&e-n[0]>cr&&ct.delete(t)},3e5);function Be(){if(!W)return ct;let e=Le();if(!e)throw new Error("Cannot find cache context");return(e.router||(e.router={})).cache||(e.router.cache=new Map)}function et(e,t){e.GET&&(e=e.GET);let n=(...r)=>{let o=Be(),s=sr(),l=ir(),c=Ce()?Ze():void 0,d=Date.now(),u=t+jt(r),a=o.get(u),m;if(W){let y=Le();if(y){let k=(y.router||(y.router={})).dataOnly;if(k){let E=y&&(y.router.data||(y.router.data={}));if(E&&u in E)return E[u];if(Array.isArray(k)&&!ur(u,k))return E[u]=void 0,Promise.resolve()}}}if(_t()&&!W&&(m=!0,R(()=>a[4].count--)),a&&a[0]&&(W||s==="native"||a[4].count||Date.now()-a[0]<ar)){m&&(a[4].count++,a[4][0]()),a[3]==="preload"&&s!=="preload"&&(a[0]=d);let y=a[1];return s!=="preload"&&(y="then"in a[1]?a[1].then(x(!1),x(!0)):x(!1)(a[1]),!W&&s==="navigate"&&$e(()=>a[4][1](a[0]))),l&&"then"in y&&y.catch(()=>{}),y}let b;if(!W&&T.has&&T.has(u)?(b=T.load(u),delete globalThis._$HY.r[u]):b=e(...r),a?(a[0]=d,a[1]=b,a[3]=s,!W&&s==="navigate"&&$e(()=>a[4][1](a[0]))):(o.set(u,a=[d,b,,s,S(d)]),a[4].count=0),m&&(a[4].count++,a[4][0]()),W){let y=Le();if(y&&y.router.dataOnly)return y.router.data[u]=b}if(s!=="preload"&&(b="then"in b?b.then(x(!1),x(!0)):x(!1)(b)),l&&"then"in b&&b.catch(()=>{}),W&&T.context&&T.context.async&&!T.context.noHydrate){let y=Le();(!y||!y.serverOnly)&&T.context.serialize(u,b)}return b;function x(y){return async k=>{if(k instanceof Response){let E=Le();if(E)for(let[g,p]of k.headers)g=="set-cookie"?E.response.headers.append("set-cookie",p):E.response.headers.set(g,p);let L=k.headers.get(lr);if(L!==null){c&&L.startsWith("/")?$e(()=>{c(L,{replace:!0})}):W?E&&(E.response.status=302):window.location.href=L;return}k.customBody&&(k=await k.customBody())}if(y)throw k;return a[2]=k,k}}};return n.keyFor=(...r)=>t+jt(r),n.key=t,n}et.get=e=>Be().get(e)[2];et.set=(e,t)=>{let n=Be(),r=Date.now(),o=n.get(e);o?(o[0]=r,o[1]=Promise.resolve(t),o[2]=t,o[3]="preload"):(n.set(e,o=[r,Promise.resolve(t),t,"preload",S(r)]),o[4].count=0)};et.delete=e=>Be().delete(e);et.clear=()=>Be().clear();function ur(e,t){for(let n of t)if(n&&e.startsWith(n))return!0;return!1}function jt(e){return JSON.stringify(e,(t,n)=>dr(n)?Object.keys(n).sort().reduce((r,o)=>(r[o]=n[o],r),{}):n)}function dr(e){let t;return e!=null&&typeof e=="object"&&(!(t=Object.getPrototypeOf(e))||t===Object.prototype)}var fr=It("<a>");function Vt(e){e=He({inactiveClass:"inactive",activeClass:"active"},e);let[,t]=it(e,["href","state","class","activeClass","inactiveClass","end"]),n=tr(()=>e.href),r=nr(n),o=Re(),s=D(()=>{let l=n();if(l===void 0)return[!1,!1];let i=Nt(l.split(/[?#]/,1)[0]).toLowerCase(),c=decodeURI(Nt(o.pathname).toLowerCase());return[e.end?i===c:c.startsWith(i+"/")||c===i,i===c]});return(()=>{var l=fr();return Ht(l,He(t,{get href(){return r()||e.href},get state(){return JSON.stringify(e.state)},get classList(){return{...e.class&&{[e.class]:!0},[e.inactiveClass]:!s()[0],[e.activeClass]:s()[0],...t.classList}},link:"",get"aria-current"(){return s()[1]?"page":void 0}}),!1,!1),l})()}var Xt=Z(),hr=0,mr=()=>`ss-modal-${hr++}`;function gr(){let e=B(Xt);if(!e)throw new Error("useSSModals must be used within SSModalsProvider");return e}function Sr(e){let t=Ze(),n=Re(),[r,o]=Ye(),s=()=>e.config.modalProps?.({hide:e.hide})??{},{primaryButtonText:l,secondaryButtonText:i,hideSecondaryButton:c,danger:d,...u}=s();return<Ge open={e.visible()}onClose={e.hide}{...u}footer={<>
-          {!c&&<Y class="secondary"onclick={e.hide}>
-              {i??"Abbrechen"}
-            </Y>}
-          <Y class={d?"danger":void 0}onclick={()=>o(()=>e.config.onPrimaryAction?.({hide:e.hide,navigate:t,pathname:n.pathname})??e.hide())}disabled={r()}>
-            {l??"Weiter"}
-          </Y>
-        </>}>
-      {e.config.content({hide:e.hide})}
-    </Ge>}function _r(e){let t=Ze(),n=Re();return<J onsubmit={r=>e.config.onSubmit({hide:e.hide,context:r,navigate:t,pathname:n.pathname})}>
-      <Er visible={e.visible}hide={e.hide}config={e.config}/>
-    </J>}function Er(e){let t=J.useContext();if(!t)return null;let n=()=>e.config.modalProps?.({hide:e.hide,context:t})??{},{primaryButtonText:r,secondaryButtonText:o,hideSecondaryButton:s,danger:l,...i}=n();return<Ge open={e.visible()}onClose={e.hide}{...i}footer={<>
-          {!s&&<Y class="secondary"onclick={e.hide}disabled={t.loading()}>
-              {o??"Abbrechen"}
-            </Y>}
-          <Y class={l?"danger":void 0}onclick={()=>t.submit()}disabled={t.loading()}>
-            {r??"Speichern"}
-          </Y>
-        </>}>
-      {e.config.content({hide:e.hide,context:t})}
-    </Ge>}function Pr(e){let[t,n]=S([]),r=new Map,o=new Map,s=220,l=u=>{let a=r.get(u);if(!a)return;a.setVisible(!1);let m=o.get(u);m&&window.clearTimeout(m);let b=window.setTimeout(()=>{n(x=>x.filter(y=>y.id!==u)),r.delete(u),o.delete(u)},s);o.set(u,b)},i=u=>{let a=mr(),[m,b]=S(!0),x={id:a,visible:m,setVisible:b,render:u};return r.set(a,x),n(y=>[...y,x]),a},c=u=>i(({hide:a,visible:m})=><Sr visible={m}hide={a}config={u}/>),d=u=>i(({hide:a,visible:m})=><_r visible={m}hide={a}config={u}/>);return R(()=>{o.forEach(u=>window.clearTimeout(u)),o.clear()}),<Xt.Provider value={{show:i,showDefault:c,showForm:d,hide:l}}>
-      {e.children}
-
-      <K each={t()}>
-        {u=>{let a=()=>l(u.id);return u.render({id:u.id,hide:a,visible:u.visible})}}
-      </K>
-    </Xt.Provider>}var ut=Z();function Ne(e){let t=Q(),n=Re(),[r,o]=S([]),s=()=>{let d=document.getElementById(t);d&&(d.checked=!1)},l=d=>{o(u=>u.includes(d)?u:[...u,d])},i=d=>{o(u=>u.filter(a=>a!==d))},c=D(()=>{let d=n.pathname,u=null;for(let a of r())d.startsWith(a)&&(!u||a.length>u.length)&&(u=a);return u});return<ut.Provider value={{closeDrawer:s,activeHref:c,registerHref:l,unregisterHref:i}}>
-      <div class={`ss_shell ${e.class??""}`}style={e.style}>
-        <input id={t}type="checkbox"class="ss_shell__drawer_toggle_input"/>
+      </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={t}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
+    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">{e.title}</div>
+          <div class="ss_shell__title">{props.title}</div>
         </div>
-        <div class="ss_shell__actions">{e.actions}</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">{e.nav}</div>
+          <nav class="ss_shell__nav" aria-label="Hauptnavigation">
+            <div class="ss_shell__nav_inner">{props.nav}</div>
           </nav>
-          <div class="ss_shell__main">{e.children}</div>
-          <label for={t}class="ss_shell__scrim"aria-label="Navigation schließen"/>
+          <div class="ss_shell__main">{props.children}</div>
+          <label for={drawerId} class="ss_shell__scrim" aria-label="Navigation schließen" />
         </div>
       </div>
-    </ut.Provider>}Ne.Nav=function(e){return<div class="ss_shell__nav_list">{e.children}</div>};Ne.NavLink=function(e){let t=B(ut);X(()=>t?.registerHref(e.href)),R(()=>t?.unregisterHref(e.href));let n=()=>t?.activeHref()===e.href;return<a class="ss_shell__nav_item"classList={{"ss_shell__nav_item--active":n()}}href={e.href}onclick={()=>{e.onclick?.(),t?.closeDrawer()}}>
-      {e.icon&&<span class="ss_shell__nav_icon">{e.icon}</span>}
-      <span class="ss_shell__nav_label">{e.children}</span>
-    </a>};Ne.NavAction=function(e){let t=B(ut);return<button type="button"class="ss_shell__nav_item"onclick={()=>{e.onclick(),t?.closeDrawer()}}>
-      {e.icon&&<span class="ss_shell__nav_icon">{e.icon}</span>}
-      <span class="ss_shell__nav_label">{e.children}</span>
-    </button>};Ne.NavGroup=function(e){return<details class="ss_shell__nav_group"open={e.initiallyExpanded}>
+    </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">
-        {e.icon&&<span class="ss_shell__nav_icon">{e.icon}</span>}
-        <span class="ss_shell__nav_label">{e.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>
+        {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">{e.children}</div>
-    </details>};function Cr(e){return<div class={`ss_surface ${e.class??""}`}style={e.style}>
-      {e.children}
-    </div>}function Jt(e){return<div class={`ss_tile ${e.class??""}`}style={e.style}>
+      <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">
-        {e.icon&&<span class="ss_tile__icon">{e.icon}</span>}
+        {props.icon && <span class="ss_tile__icon">{props.icon}</span>}
         <div class="ss_tile__content">
-          {e.href?<h5 class="ss_tile__title">
-              <Vt class="ss_tile__link"href={e.href}onclick={e.onLinkClick}>
-                {e.title}
-              </Vt>
-            </h5>:<h5 class="ss_tile__title">
-              <span class="ss_tile__text">{e.title}</span>
+          {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>}
-          {e.subtitle&&<div class="ss_tile__subtitle">{e.subtitle}</div>}
+          {props.subtitle && <div class="ss_tile__subtitle">{props.subtitle}</div>}
         </div>
-        {e.trailing&&<div class="ss_tile__trailing">{e.trailing}</div>}
+        {props.trailing && <div class="ss_tile__trailing">{props.trailing}</div>}
       </div>
-    </div>}function Tr(e){return function(t){let n=e(t.data);return<Jt{...n}onLinkClick={t.onLinkClick??n.onLinkClick}href={t.noLink?void 0:n.href}icon={t.noIcon?void 0:n.icon}/>}}export{Y as SSButton,Ut as SSCallout,zt as SSChip,_n as SSDataTable,xn as SSDropdown,kn as SSExpandable,J as SSForm,En as SSHeader,Ge as SSModal,Pr as SSModalsProvider,Ne as SSShell,Cr as SSSurface,Jt as SSTile,Tr as createSSTile,gr as useSSModals};
+    </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
+};