@sortsys/ui 0.1.7 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/dev.js CHANGED
@@ -82,12 +82,72 @@ function SSChip(props) {
82
82
  })();
83
83
  }
84
84
  delegateEvents(["click"]);
85
- var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
86
- var _tmpl$23 = /* @__PURE__ */ template(`<div class=ss_table__pagination><button type=button class=ss_table__page_button aria-label="Erste Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M7 6v12"></path><path d="M18 6l-6 6l6 6"></path></svg></button><button type=button class=ss_table__page_button aria-label="Vorherige Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M15 6l-6 6l6 6"></path></svg></button><span class=ss_table__page_info>Seite <!> von </span><button type=button class=ss_table__page_button aria-label="N\xE4chste Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></button><button type=button class=ss_table__page_button aria-label="Letzte Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 6l6 6l-6 6"></path><path d="M17 5v13">`);
87
- var _tmpl$33 = /* @__PURE__ */ template(`<div><div class=ss_table__scroll><table><thead><tr></tr></thead><tbody>`);
88
- var _tmpl$42 = /* @__PURE__ */ template(`<th>`);
89
- var _tmpl$5 = /* @__PURE__ */ template(`<button type=button class=ss_table__sort_button><span class=ss_table__sort_icon aria-hidden=true>`);
90
- var _tmpl$6 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
85
+ var _tmpl$4 = /* @__PURE__ */ template(`<dl>`);
86
+ var _tmpl$23 = /* @__PURE__ */ template(`<div class=ss_attr_list__item><div class=ss_attr_list__body><dt class=ss_attr_list__label></dt><dd class=ss_attr_list__value>`);
87
+ var _tmpl$33 = /* @__PURE__ */ template(`<span class=ss_attr_list__icon>`);
88
+ var _tmpl$42 = /* @__PURE__ */ template(`<div class=ss_attr_list__description>`);
89
+ var _tmpl$5 = /* @__PURE__ */ template(`<div class=ss_attr_list__action>`);
90
+ function SSAttrList(props) {
91
+ const style$1 = () => {
92
+ if (!props.columns) return props.style;
93
+ const columnStyle = `grid-template-columns: repeat(${props.columns}, minmax(0, 1fr));`;
94
+ return `${columnStyle}${props.style ?? ""}`;
95
+ };
96
+ return (() => {
97
+ var _el$ = _tmpl$4();
98
+ insert(_el$, createComponent(For, {
99
+ get each() {
100
+ return props.items;
101
+ },
102
+ children: (item) => (() => {
103
+ var _el$2 = _tmpl$23(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
104
+ insert(_el$2, (() => {
105
+ var _c$ = memo(() => !!item.icon);
106
+ return () => _c$() && (() => {
107
+ var _el$6 = _tmpl$33();
108
+ insert(_el$6, () => item.icon);
109
+ return _el$6;
110
+ })();
111
+ })(), _el$3);
112
+ insert(_el$4, () => item.label);
113
+ insert(_el$5, () => item.value);
114
+ insert(_el$3, (() => {
115
+ var _c$2 = memo(() => !!item.description);
116
+ return () => _c$2() && (() => {
117
+ var _el$7 = _tmpl$42();
118
+ insert(_el$7, () => item.description);
119
+ return _el$7;
120
+ })();
121
+ })(), null);
122
+ insert(_el$2, (() => {
123
+ var _c$3 = memo(() => !!item.action);
124
+ return () => _c$3() && (() => {
125
+ var _el$8 = _tmpl$5();
126
+ insert(_el$8, () => item.action);
127
+ return _el$8;
128
+ })();
129
+ })(), null);
130
+ return _el$2;
131
+ })()
132
+ }));
133
+ effect((_p$) => {
134
+ var _v$ = `ss_attr_list ${props.class ?? ""}`, _v$2 = style$1();
135
+ _v$ !== _p$.e && className(_el$, _p$.e = _v$);
136
+ _p$.t = style(_el$, _v$2, _p$.t);
137
+ return _p$;
138
+ }, {
139
+ e: void 0,
140
+ t: void 0
141
+ });
142
+ return _el$;
143
+ })();
144
+ }
145
+ var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
146
+ var _tmpl$24 = /* @__PURE__ */ template(`<div class=ss_table__pagination><button type=button class=ss_table__page_button aria-label="Erste Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M7 6v12"></path><path d="M18 6l-6 6l6 6"></path></svg></button><button type=button class=ss_table__page_button aria-label="Vorherige Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M15 6l-6 6l6 6"></path></svg></button><span class=ss_table__page_info>Seite <!> von </span><button type=button class=ss_table__page_button aria-label="N\xE4chste Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></button><button type=button class=ss_table__page_button aria-label="Letzte Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 6l6 6l-6 6"></path><path d="M17 5v13">`);
147
+ var _tmpl$34 = /* @__PURE__ */ template(`<div><div class=ss_table__scroll><table><thead><tr></tr></thead><tbody>`);
148
+ var _tmpl$43 = /* @__PURE__ */ template(`<th>`);
149
+ var _tmpl$52 = /* @__PURE__ */ template(`<button type=button class=ss_table__sort_button><span class=ss_table__sort_icon aria-hidden=true>`);
150
+ var _tmpl$62 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
91
151
  var _tmpl$7 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-up"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 15l6 -6l6 6">`);
92
152
  var _tmpl$8 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-selector"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4">`);
93
153
  var _tmpl$9 = /* @__PURE__ */ template(`<span class=ss_table__header_label>`);
@@ -103,7 +163,7 @@ function SSDataCell(props) {
103
163
  return null;
104
164
  });
105
165
  return (() => {
106
- var _el$ = _tmpl$4();
166
+ var _el$ = _tmpl$6();
107
167
  insert(_el$, () => {
108
168
  const value = rendered();
109
169
  if (value && typeof value.then === "function") {
@@ -175,7 +235,7 @@ function SSDataTable(props) {
175
235
  const paginationPosition = () => props.paginationPosition ?? "bottom";
176
236
  const containerClass = () => `ss_table ${paginationPosition() === "top" ? "ss_table--pagination-top" : ""} ${props.class ?? ""}`;
177
237
  const paginationBar = () => (() => {
178
- var _el$2 = _tmpl$23(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling; _el$8.nextSibling; var _el$9 = _el$5.nextSibling, _el$0 = _el$9.nextSibling;
238
+ var _el$2 = _tmpl$24(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling; _el$8.nextSibling; var _el$9 = _el$5.nextSibling, _el$0 = _el$9.nextSibling;
179
239
  _el$3.$$click = () => goToPage(1);
180
240
  _el$4.$$click = () => goToPage(page() - 1);
181
241
  insert(_el$5, page, _el$8);
@@ -198,7 +258,7 @@ function SSDataTable(props) {
198
258
  return _el$2;
199
259
  })();
200
260
  return (() => {
201
- var _el$1 = _tmpl$33(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling;
261
+ var _el$1 = _tmpl$34(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling;
202
262
  insert(_el$1, (() => {
203
263
  var _c$ = memo(() => paginationPosition() === "top");
204
264
  return () => _c$() && paginationBar();
@@ -212,14 +272,14 @@ function SSDataTable(props) {
212
272
  const isActive = () => sortIndex() === index();
213
273
  const currentDir = () => isActive() ? sortDir() : null;
214
274
  return (() => {
215
- var _el$15 = _tmpl$42();
275
+ var _el$15 = _tmpl$43();
216
276
  insert(_el$15, sortable ? (() => {
217
- var _el$16 = _tmpl$5(), _el$17 = _el$16.firstChild;
277
+ var _el$16 = _tmpl$52(), _el$17 = _el$16.firstChild;
218
278
  _el$16.$$click = () => toggleSort(index());
219
279
  insert(_el$16, () => column.label, _el$17);
220
280
  insert(_el$17, (() => {
221
281
  var _c$3 = memo(() => currentDir() === "asc");
222
- return () => _c$3() ? _tmpl$6() : memo(() => currentDir() === "desc")() ? _tmpl$7() : _tmpl$8();
282
+ return () => _c$3() ? _tmpl$62() : memo(() => currentDir() === "desc")() ? _tmpl$7() : _tmpl$8();
223
283
  })());
224
284
  effect((_p$) => {
225
285
  var _v$7 = currentDir() === "asc" ? "ascending" : currentDir() === "desc" ? "descending" : "none", _v$8 = currentDir() ?? "none";
@@ -283,11 +343,29 @@ function SSDataTable(props) {
283
343
  })();
284
344
  }
285
345
  delegateEvents(["click"]);
286
- var _tmpl$10 = /* @__PURE__ */ template(`<div class=ss_dropdown__menu role=menu>`);
287
- var _tmpl$24 = /* @__PURE__ */ template(`<div><button type=button class="ss_dropdown__trigger ss_button ss_button--icon"aria-haspopup=menu>`);
288
- var _tmpl$34 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0">`);
289
- var _tmpl$43 = /* @__PURE__ */ template(`<button type=button class=ss_dropdown__item><span class=ss_dropdown__item_icon></span><span class=ss_dropdown__item_label>`);
290
- var _tmpl$52 = /* @__PURE__ */ template(`<span class=ss_dropdown__item_check aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-check"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M5 12l5 5l10 -10">`);
346
+ var _tmpl$10 = /* @__PURE__ */ template(`<div role=separator>`);
347
+ function SSDivider(props) {
348
+ return (() => {
349
+ var _el$ = _tmpl$10();
350
+ effect((_p$) => {
351
+ var _v$ = `ss_divider ${props.vertical ? "ss_divider--vertical" : ""} ${props.class ?? ""}`, _v$2 = props.style, _v$3 = props.vertical ? "vertical" : "horizontal";
352
+ _v$ !== _p$.e && className(_el$, _p$.e = _v$);
353
+ _p$.t = style(_el$, _v$2, _p$.t);
354
+ _v$3 !== _p$.a && setAttribute(_el$, "aria-orientation", _p$.a = _v$3);
355
+ return _p$;
356
+ }, {
357
+ e: void 0,
358
+ t: void 0,
359
+ a: void 0
360
+ });
361
+ return _el$;
362
+ })();
363
+ }
364
+ var _tmpl$11 = /* @__PURE__ */ template(`<div class=ss_dropdown__menu role=menu>`);
365
+ var _tmpl$25 = /* @__PURE__ */ template(`<div><button type=button class="ss_dropdown__trigger ss_button ss_button--icon"aria-haspopup=menu>`);
366
+ var _tmpl$35 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0">`);
367
+ var _tmpl$44 = /* @__PURE__ */ template(`<button type=button class=ss_dropdown__item><span class=ss_dropdown__item_icon></span><span class=ss_dropdown__item_label>`);
368
+ var _tmpl$53 = /* @__PURE__ */ template(`<span class=ss_dropdown__item_check aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-check"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M5 12l5 5l10 -10">`);
291
369
  function SSDropdown(props) {
292
370
  const [open, setOpen] = createSignal(false);
293
371
  const [renderMenu, setRenderMenu] = createSignal(false);
@@ -322,22 +400,22 @@ function SSDropdown(props) {
322
400
  });
323
401
  });
324
402
  return (() => {
325
- var _el$ = _tmpl$24(), _el$2 = _el$.firstChild;
403
+ var _el$ = _tmpl$25(), _el$2 = _el$.firstChild;
326
404
  use((el) => rootRef = el, _el$);
327
405
  _el$2.$$click = () => setOpen((value) => !value);
328
- insert(_el$2, () => props.icon ?? _tmpl$34());
406
+ insert(_el$2, () => props.icon ?? _tmpl$35());
329
407
  insert(_el$, createComponent(Show, {
330
408
  get when() {
331
409
  return renderMenu();
332
410
  },
333
411
  get children() {
334
- var _el$3 = _tmpl$10();
412
+ var _el$3 = _tmpl$11();
335
413
  insert(_el$3, createComponent(For, {
336
414
  get each() {
337
415
  return props.items;
338
416
  },
339
417
  children: (item) => (() => {
340
- var _el$5 = _tmpl$43(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
418
+ var _el$5 = _tmpl$44(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
341
419
  _el$5.$$click = async () => {
342
420
  close();
343
421
  await item.onclick?.();
@@ -346,7 +424,7 @@ function SSDropdown(props) {
346
424
  insert(_el$7, () => item.label);
347
425
  insert(_el$5, (() => {
348
426
  var _c$ = memo(() => !!item.checked);
349
- return () => _c$() && _tmpl$52();
427
+ return () => _c$() && _tmpl$53();
350
428
  })(), null);
351
429
  effect((_p$) => {
352
430
  var _v$5 = item.checked ? "menuitemcheckbox" : "menuitem", _v$6 = item.checked ? "true" : void 0;
@@ -381,9 +459,9 @@ function SSDropdown(props) {
381
459
  })();
382
460
  }
383
461
  delegateEvents(["click"]);
384
- var _tmpl$11 = /* @__PURE__ */ template(`<div><div class=ss_expandable__header role=button tabindex=0><span class=ss_expandable__icon aria-hidden=true></span><span class=ss_expandable__title></span></div><div class=ss_expandable__content style=transition-duration:200ms><div class=ss_expandable__divider_wrapper><div class=ss_expandable__divider>`);
385
- var _tmpl$25 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
386
- var _tmpl$35 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6">`);
462
+ var _tmpl$12 = /* @__PURE__ */ template(`<div><div class=ss_expandable__header role=button tabindex=0><span class=ss_expandable__icon aria-hidden=true></span><span class=ss_expandable__title></span></div><div class=ss_expandable__content style=transition-duration:200ms><div class=ss_expandable__divider_wrapper><div class=ss_expandable__divider>`);
463
+ var _tmpl$26 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
464
+ var _tmpl$36 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6">`);
387
465
  var TRANSITION_MS = 200;
388
466
  function SSExpandable(props) {
389
467
  const [height, setHeight] = createSignal(props.initiallyExpanded ? "auto" : 0);
@@ -405,7 +483,7 @@ function SSExpandable(props) {
405
483
  if (timeoutId) clearTimeout(timeoutId);
406
484
  });
407
485
  return (() => {
408
- var _el$ = _tmpl$11(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild; _el$6.firstChild;
486
+ var _el$ = _tmpl$12(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild; _el$6.firstChild;
409
487
  _el$2.$$keydown = (event) => {
410
488
  if (event.key === "Enter" || event.key === " ") {
411
489
  event.preventDefault();
@@ -415,7 +493,7 @@ function SSExpandable(props) {
415
493
  _el$2.$$click = toggle;
416
494
  insert(_el$3, (() => {
417
495
  var _c$ = memo(() => !!isExpanded());
418
- return () => _c$() ? _tmpl$25() : _tmpl$35();
496
+ return () => _c$() ? _tmpl$26() : _tmpl$36();
419
497
  })());
420
498
  insert(_el$4, () => props.title);
421
499
  use((el) => contentRef = el, _el$5);
@@ -453,22 +531,22 @@ function createLoading() {
453
531
  }
454
532
 
455
533
  // src/components/SSForm.tsx
456
- var _tmpl$12 = /* @__PURE__ */ template(`<form class=ss_form>`);
457
- var _tmpl$26 = /* @__PURE__ */ template(`<div class=ss_form_input><label></label><div class=ss__wrapper>`);
458
- var _tmpl$36 = /* @__PURE__ */ template(`<textarea>`);
459
- var _tmpl$44 = /* @__PURE__ */ template(`<input>`);
460
- var _tmpl$53 = /* @__PURE__ */ template(`<ul class=ss__suggestions>`);
461
- var _tmpl$62 = /* @__PURE__ */ template(`<li>`);
534
+ var _tmpl$13 = /* @__PURE__ */ template(`<form class=ss_form>`);
535
+ var _tmpl$27 = /* @__PURE__ */ template(`<div class=ss_form_input><label></label><div class=ss__wrapper>`);
536
+ var _tmpl$37 = /* @__PURE__ */ template(`<textarea>`);
537
+ var _tmpl$45 = /* @__PURE__ */ template(`<input>`);
538
+ var _tmpl$54 = /* @__PURE__ */ template(`<ul class=ss__suggestions>`);
539
+ var _tmpl$63 = /* @__PURE__ */ template(`<li>`);
462
540
  var _tmpl$72 = /* @__PURE__ */ template(`<span role=alert>`);
463
541
  var _tmpl$82 = /* @__PURE__ */ template(`<div class=ss_form_date><label></label><div class=ss__wrapper><input type=text inputmode=numeric autocomplete=off placeholder=TT.MM.JJJJ><button type=button class=ss_form_date__icon aria-label="Kalender \xF6ffnen"aria-haspopup=dialog><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=currentColor class="icon icon-tabler icons-tabler-filled icon-tabler-calendar-week"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M16 2c.183 0 .355 .05 .502 .135l.033 .02c.28 .177 .465 .49 .465 .845v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 .514 -.874l.093 -.046l.066 -.025l.1 -.029l.107 -.019l.12 -.007q .083 0 .161 .013l.122 .029l.04 .012l.06 .023c.328 .135 .568 .44 .61 .806l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z"></path><path d="M9.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1"></path><path d="M13.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1"></path><path d="M17.02 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1"></path><path d="M12.02 15a1 1 0 0 1 0 2a1.001 1.001 0 1 1 -.005 -2z"></path><path d="M9.015 16a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1">`);
464
542
  var _tmpl$92 = /* @__PURE__ */ template(`<div class=ss_form_date__picker role=dialog aria-label="Datum ausw\xE4hlen"><div class=ss_form_date__header><div class=ss_form_date__nav_group><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M7 6v12"></path><path d="M18 6l-6 6l6 6"></path></svg></button><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M15 6l-6 6l6 6"></path></svg></button></div><div class=ss_form_date__title></div><div class=ss_form_date__nav_group><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></button><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 6l6 6l-6 6"></path><path d="M17 5v13"></path></svg></button></div></div><div class=ss_form_date__weekdays></div><div class=ss_form_date__grid>`);
465
543
  var _tmpl$02 = /* @__PURE__ */ template(`<span>`);
466
- var _tmpl$13 = /* @__PURE__ */ template(`<button type=button class=ss_form_date__day>`);
544
+ var _tmpl$14 = /* @__PURE__ */ template(`<button type=button class=ss_form_date__day>`);
467
545
  var _tmpl$102 = /* @__PURE__ */ template(`<span class="ss_form_date__day is-empty">`);
468
546
  var _tmpl$112 = /* @__PURE__ */ template(`<div class=ss_form_checkbox><div class=ss__wrapper><input type=checkbox><label>`);
469
547
  var _tmpl$122 = /* @__PURE__ */ template(`<div class=ss_form_select><label></label><div class=ss_form_select__field><select></select><span class=ss_form_select__icon aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
470
548
  var _tmpl$132 = /* @__PURE__ */ template(`<option>`);
471
- var _tmpl$14 = /* @__PURE__ */ template(`<div class=ss_form_ac_select><label>`);
549
+ var _tmpl$142 = /* @__PURE__ */ template(`<div class=ss_form_ac_select><label>`);
472
550
  var _tmpl$15 = /* @__PURE__ */ template(`<div class=ss__selection><div class=ss__content></div><button type=button class=ss__clear aria-label="Auswahl entfernen">\xD7`);
473
551
  var _tmpl$16 = /* @__PURE__ */ template(`<div class=ss__wrapper><div class=ss__input_row><input>`);
474
552
  var _tmpl$17 = /* @__PURE__ */ template(`<span class=ss__prefix role=button>`);
@@ -502,7 +580,7 @@ var SSForm = function(props) {
502
580
  })
503
581
  };
504
582
  return (() => {
505
- var _el$ = _tmpl$12();
583
+ var _el$ = _tmpl$13();
506
584
  _el$.addEventListener("submit", (e) => {
507
585
  e.preventDefault();
508
586
  context.submit();
@@ -638,12 +716,12 @@ SSForm.Input = function(props) {
638
716
  };
639
717
  const _id = createUniqueId();
640
718
  return (() => {
641
- var _el$2 = _tmpl$26(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
719
+ var _el$2 = _tmpl$27(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
642
720
  insert(_el$3, () => props.label);
643
721
  insert(_el$4, (() => {
644
722
  var _c$ = memo(() => !!props.textArea);
645
723
  return () => _c$() ? (() => {
646
- var _el$5 = _tmpl$36();
724
+ var _el$5 = _tmpl$37();
647
725
  _el$5.$$keydown = handleKeyDown;
648
726
  _el$5.$$input = (e) => handleInputChange(e.target.value);
649
727
  effect((_p$) => {
@@ -658,7 +736,7 @@ SSForm.Input = function(props) {
658
736
  effect(() => _el$5.value = value());
659
737
  return _el$5;
660
738
  })() : (() => {
661
- var _el$6 = _tmpl$44();
739
+ var _el$6 = _tmpl$45();
662
740
  _el$6.$$keydown = handleKeyDown;
663
741
  _el$6.$$input = (e) => handleInputChange(e.target.value);
664
742
  effect((_p$) => {
@@ -679,7 +757,7 @@ SSForm.Input = function(props) {
679
757
  insert(_el$4, (() => {
680
758
  var _c$2 = memo(() => !!!!suggItems().length);
681
759
  return () => _c$2() && (() => {
682
- var _el$7 = _tmpl$53();
760
+ var _el$7 = _tmpl$54();
683
761
  use((el) => suggListRef = el, _el$7);
684
762
  insert(_el$7, createComponent(For, {
685
763
  get each() {
@@ -692,7 +770,7 @@ SSForm.Input = function(props) {
692
770
  selectSuggestion(item);
693
771
  };
694
772
  return (() => {
695
- var _el$8 = _tmpl$62();
773
+ var _el$8 = _tmpl$63();
696
774
  _el$8.$$click = handleSelect;
697
775
  _el$8.$$pointerdown = (e) => e.preventDefault();
698
776
  insert(_el$8, () => props.suggestions.stringify({
@@ -876,7 +954,7 @@ SSForm.Date = function(props) {
876
954
  return _el$24;
877
955
  })()));
878
956
  insert(_el$23, () => buildCalendar().map((day) => day ? (() => {
879
- var _el$25 = _tmpl$13();
957
+ var _el$25 = _tmpl$14();
880
958
  _el$25.$$click = () => handleSelect(day);
881
959
  insert(_el$25, day);
882
960
  effect((_p$) => {
@@ -1251,7 +1329,7 @@ SSForm.ACSelect = function(props) {
1251
1329
  };
1252
1330
  const isDisabled = () => props.disabled || context?.loading();
1253
1331
  return (() => {
1254
- var _el$39 = _tmpl$14(), _el$40 = _el$39.firstChild;
1332
+ var _el$39 = _tmpl$142(), _el$40 = _el$39.firstChild;
1255
1333
  insert(_el$40, () => props.label);
1256
1334
  insert(_el$39, (() => {
1257
1335
  var _c$8 = memo(() => !!(props.maxSelectedItems === 1 && !!props.renderSelection && value().length === 1));
@@ -1307,7 +1385,7 @@ SSForm.ACSelect = function(props) {
1307
1385
  insert(_el$44, (() => {
1308
1386
  var _c$1 = memo(() => !!!!suggItems().length);
1309
1387
  return () => _c$1() && (() => {
1310
- var _el$48 = _tmpl$53();
1388
+ var _el$48 = _tmpl$54();
1311
1389
  use((el) => suggListRef = el, _el$48);
1312
1390
  insert(_el$48, createComponent(For, {
1313
1391
  get each() {
@@ -1320,7 +1398,7 @@ SSForm.ACSelect = function(props) {
1320
1398
  document.getElementById(props.id || _id)?.focus();
1321
1399
  };
1322
1400
  return (() => {
1323
- var _el$49 = _tmpl$62();
1401
+ var _el$49 = _tmpl$63();
1324
1402
  _el$49.$$click = handleSelect;
1325
1403
  _el$49.$$pointerdown = (e) => e.preventDefault();
1326
1404
  insert(_el$49, () => props.renderItem({
@@ -1414,7 +1492,7 @@ SSForm.rules = {
1414
1492
  };
1415
1493
  delegateEvents(["input", "keydown", "pointerdown", "click"]);
1416
1494
  var _tmpl$19 = /* @__PURE__ */ template(`<div><div class=ss_header__text><h3 class=ss_header__title></h3></div><div class=ss_header__actions>`);
1417
- var _tmpl$27 = /* @__PURE__ */ template(`<h5 class=ss_header__subtitle>`);
1495
+ var _tmpl$28 = /* @__PURE__ */ template(`<h5 class=ss_header__subtitle>`);
1418
1496
  function SSHeader(props) {
1419
1497
  return (() => {
1420
1498
  var _el$ = _tmpl$19(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
@@ -1422,7 +1500,7 @@ function SSHeader(props) {
1422
1500
  insert(_el$2, (() => {
1423
1501
  var _c$ = memo(() => !!props.subtitle);
1424
1502
  return () => _c$() && (() => {
1425
- var _el$5 = _tmpl$27();
1503
+ var _el$5 = _tmpl$28();
1426
1504
  insert(_el$5, () => props.subtitle);
1427
1505
  return _el$5;
1428
1506
  })();
@@ -1441,10 +1519,10 @@ function SSHeader(props) {
1441
1519
  })();
1442
1520
  }
1443
1521
  var _tmpl$20 = /* @__PURE__ */ template(`<div class=ss_modal__footer>`);
1444
- var _tmpl$28 = /* @__PURE__ */ template(`<div class=ss_modal><div class=ss_modal__backdrop></div><div class=ss_modal__panel role=dialog aria-modal=true tabindex=-1><div class=ss_modal__body><div class=ss_modal__body_inner>`);
1445
- var _tmpl$37 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M18 6l-12 12"></path><path d="M6 6l12 12">`);
1446
- var _tmpl$45 = /* @__PURE__ */ template(`<div class=ss_modal__header>`);
1447
- var _tmpl$54 = /* @__PURE__ */ template(`<h2 class=ss_modal__title>`);
1522
+ var _tmpl$29 = /* @__PURE__ */ template(`<div class=ss_modal><div class=ss_modal__backdrop></div><div class=ss_modal__panel role=dialog aria-modal=true tabindex=-1><div class=ss_modal__body><div class=ss_modal__body_inner>`);
1523
+ var _tmpl$38 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M18 6l-12 12"></path><path d="M6 6l12 12">`);
1524
+ var _tmpl$46 = /* @__PURE__ */ template(`<div class=ss_modal__header>`);
1525
+ var _tmpl$55 = /* @__PURE__ */ template(`<h2 class=ss_modal__title>`);
1448
1526
  var CLOSE_ANIMATION_MS = 180;
1449
1527
  function SSModal(props) {
1450
1528
  const [isMounted, setIsMounted] = createSignal(props.open);
@@ -1500,17 +1578,17 @@ function SSModal(props) {
1500
1578
  get children() {
1501
1579
  return createComponent(Portal, {
1502
1580
  get children() {
1503
- var _el$ = _tmpl$28(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
1581
+ var _el$ = _tmpl$29(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
1504
1582
  _el$2.$$click = handleBackdropClick;
1505
1583
  use((el) => panelRef = el, _el$3);
1506
1584
  insert(_el$3, (() => {
1507
1585
  var _c$ = memo(() => !!(props.title || props.onClose));
1508
1586
  return () => _c$() && (() => {
1509
- var _el$7 = _tmpl$45();
1587
+ var _el$7 = _tmpl$46();
1510
1588
  insert(_el$7, (() => {
1511
1589
  var _c$2 = memo(() => !!props.title);
1512
1590
  return () => _c$2() && (() => {
1513
- var _el$9 = _tmpl$54();
1591
+ var _el$9 = _tmpl$55();
1514
1592
  setAttribute(_el$9, "id", titleId);
1515
1593
  insert(_el$9, () => props.title);
1516
1594
  return _el$9;
@@ -1531,7 +1609,7 @@ function SSModal(props) {
1531
1609
  props.onClose?.();
1532
1610
  },
1533
1611
  get children() {
1534
- return _tmpl$37();
1612
+ return _tmpl$38();
1535
1613
  }
1536
1614
  });
1537
1615
  }
@@ -1789,11 +1867,11 @@ function SSModalsProvider(props) {
1789
1867
  });
1790
1868
  }
1791
1869
  var _tmpl$21 = /* @__PURE__ */ template(`<div><input type=checkbox class=ss_shell__drawer_toggle_input><header class=ss_shell__header><div class=ss_shell__header_left><label class="ss_shell__drawer_toggle ss_button ss_button--icon"aria-label="Navigation \xF6ffnen"role=button tabindex=0><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg></label><div class=ss_shell__title></div></div><div class=ss_shell__actions></div></header><div class=ss_shell__body><nav class=ss_shell__nav aria-label=Hauptnavigation><div class=ss_shell__nav_inner></div></nav><div class=ss_shell__main></div><label class=ss_shell__scrim aria-label="Navigation schlie\xDFen">`);
1792
- var _tmpl$29 = /* @__PURE__ */ template(`<div class=ss_shell__nav_list>`);
1793
- var _tmpl$38 = /* @__PURE__ */ template(`<a class=ss_shell__nav_item><span class=ss_shell__nav_label>`);
1794
- var _tmpl$46 = /* @__PURE__ */ template(`<span class=ss_shell__nav_icon>`);
1795
- var _tmpl$55 = /* @__PURE__ */ template(`<button type=button class=ss_shell__nav_item><span class=ss_shell__nav_label>`);
1796
- var _tmpl$63 = /* @__PURE__ */ template(`<details class=ss_shell__nav_group><summary class=ss_shell__nav_group_header><span class=ss_shell__nav_label></span><span class=ss_shell__nav_group_chevron aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class=ss_shell__nav_group_chevron_svg><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></span></summary><div class=ss_shell__nav_group_items>`);
1870
+ var _tmpl$210 = /* @__PURE__ */ template(`<div class=ss_shell__nav_list>`);
1871
+ var _tmpl$39 = /* @__PURE__ */ template(`<a class=ss_shell__nav_item><span class=ss_shell__nav_label>`);
1872
+ var _tmpl$47 = /* @__PURE__ */ template(`<span class=ss_shell__nav_icon>`);
1873
+ var _tmpl$56 = /* @__PURE__ */ template(`<button type=button class=ss_shell__nav_item><span class=ss_shell__nav_label>`);
1874
+ var _tmpl$64 = /* @__PURE__ */ template(`<details class=ss_shell__nav_group><summary class=ss_shell__nav_group_header><span class=ss_shell__nav_label></span><span class=ss_shell__nav_group_chevron aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class=ss_shell__nav_group_chevron_svg><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></span></summary><div class=ss_shell__nav_group_items>`);
1797
1875
  var SSShellContext = createContext();
1798
1876
  function SSShell(props) {
1799
1877
  const drawerId = createUniqueId();
@@ -1851,7 +1929,7 @@ function SSShell(props) {
1851
1929
  }
1852
1930
  SSShell.Nav = function(props) {
1853
1931
  return (() => {
1854
- var _el$11 = _tmpl$29();
1932
+ var _el$11 = _tmpl$210();
1855
1933
  insert(_el$11, () => props.children);
1856
1934
  return _el$11;
1857
1935
  })();
@@ -1862,7 +1940,7 @@ SSShell.NavLink = function(props) {
1862
1940
  onCleanup(() => context?.unregisterHref(props.href));
1863
1941
  const isActive = () => context?.activeHref() === props.href;
1864
1942
  return (() => {
1865
- var _el$12 = _tmpl$38(), _el$13 = _el$12.firstChild;
1943
+ var _el$12 = _tmpl$39(), _el$13 = _el$12.firstChild;
1866
1944
  _el$12.$$click = () => {
1867
1945
  props.onclick?.();
1868
1946
  context?.closeDrawer();
@@ -1870,7 +1948,7 @@ SSShell.NavLink = function(props) {
1870
1948
  insert(_el$12, (() => {
1871
1949
  var _c$ = memo(() => !!props.icon);
1872
1950
  return () => _c$() && (() => {
1873
- var _el$14 = _tmpl$46();
1951
+ var _el$14 = _tmpl$47();
1874
1952
  insert(_el$14, () => props.icon);
1875
1953
  return _el$14;
1876
1954
  })();
@@ -1891,7 +1969,7 @@ SSShell.NavLink = function(props) {
1891
1969
  SSShell.NavAction = function(props) {
1892
1970
  const context = useContext(SSShellContext);
1893
1971
  return (() => {
1894
- var _el$15 = _tmpl$55(), _el$16 = _el$15.firstChild;
1972
+ var _el$15 = _tmpl$56(), _el$16 = _el$15.firstChild;
1895
1973
  _el$15.$$click = () => {
1896
1974
  props.onclick();
1897
1975
  context?.closeDrawer();
@@ -1899,7 +1977,7 @@ SSShell.NavAction = function(props) {
1899
1977
  insert(_el$15, (() => {
1900
1978
  var _c$2 = memo(() => !!props.icon);
1901
1979
  return () => _c$2() && (() => {
1902
- var _el$17 = _tmpl$46();
1980
+ var _el$17 = _tmpl$47();
1903
1981
  insert(_el$17, () => props.icon);
1904
1982
  return _el$17;
1905
1983
  })();
@@ -1910,11 +1988,11 @@ SSShell.NavAction = function(props) {
1910
1988
  };
1911
1989
  SSShell.NavGroup = function(props) {
1912
1990
  return (() => {
1913
- var _el$18 = _tmpl$63(), _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$19.nextSibling;
1991
+ var _el$18 = _tmpl$64(), _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$19.nextSibling;
1914
1992
  insert(_el$19, (() => {
1915
1993
  var _c$3 = memo(() => !!props.icon);
1916
1994
  return () => _c$3() && (() => {
1917
- var _el$22 = _tmpl$46();
1995
+ var _el$22 = _tmpl$47();
1918
1996
  insert(_el$22, () => props.icon);
1919
1997
  return _el$22;
1920
1998
  })();
@@ -1944,18 +2022,18 @@ function SSSurface(props) {
1944
2022
  })();
1945
2023
  }
1946
2024
  var _tmpl$31 = /* @__PURE__ */ template(`<div><div class=ss_tile__row><div class=ss_tile__content>`);
1947
- var _tmpl$210 = /* @__PURE__ */ template(`<span class=ss_tile__icon>`);
1948
- var _tmpl$39 = /* @__PURE__ */ template(`<h5 class=ss_tile__title>`);
1949
- var _tmpl$47 = /* @__PURE__ */ template(`<h5 class=ss_tile__title><span class=ss_tile__text>`);
1950
- var _tmpl$56 = /* @__PURE__ */ template(`<div class=ss_tile__subtitle>`);
1951
- var _tmpl$64 = /* @__PURE__ */ template(`<div class=ss_tile__trailing>`);
2025
+ var _tmpl$211 = /* @__PURE__ */ template(`<span class=ss_tile__icon>`);
2026
+ var _tmpl$310 = /* @__PURE__ */ template(`<h5 class=ss_tile__title>`);
2027
+ var _tmpl$48 = /* @__PURE__ */ template(`<h5 class=ss_tile__title><span class=ss_tile__text>`);
2028
+ var _tmpl$57 = /* @__PURE__ */ template(`<div class=ss_tile__subtitle>`);
2029
+ var _tmpl$65 = /* @__PURE__ */ template(`<div class=ss_tile__trailing>`);
1952
2030
  function SSTile(props) {
1953
2031
  return (() => {
1954
2032
  var _el$ = _tmpl$31(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
1955
2033
  insert(_el$2, (() => {
1956
2034
  var _c$ = memo(() => !!props.icon);
1957
2035
  return () => _c$() && (() => {
1958
- var _el$4 = _tmpl$210();
2036
+ var _el$4 = _tmpl$211();
1959
2037
  insert(_el$4, () => props.icon);
1960
2038
  return _el$4;
1961
2039
  })();
@@ -1963,7 +2041,7 @@ function SSTile(props) {
1963
2041
  insert(_el$3, (() => {
1964
2042
  var _c$2 = memo(() => !!props.href);
1965
2043
  return () => _c$2() ? (() => {
1966
- var _el$5 = _tmpl$39();
2044
+ var _el$5 = _tmpl$310();
1967
2045
  insert(_el$5, createComponent(A, {
1968
2046
  "class": "ss_tile__link",
1969
2047
  get href() {
@@ -1978,7 +2056,7 @@ function SSTile(props) {
1978
2056
  }));
1979
2057
  return _el$5;
1980
2058
  })() : (() => {
1981
- var _el$6 = _tmpl$47(), _el$7 = _el$6.firstChild;
2059
+ var _el$6 = _tmpl$48(), _el$7 = _el$6.firstChild;
1982
2060
  insert(_el$7, () => props.title);
1983
2061
  return _el$6;
1984
2062
  })();
@@ -1986,7 +2064,7 @@ function SSTile(props) {
1986
2064
  insert(_el$3, (() => {
1987
2065
  var _c$3 = memo(() => !!props.subtitle);
1988
2066
  return () => _c$3() && (() => {
1989
- var _el$8 = _tmpl$56();
2067
+ var _el$8 = _tmpl$57();
1990
2068
  insert(_el$8, () => props.subtitle);
1991
2069
  return _el$8;
1992
2070
  })();
@@ -1994,7 +2072,7 @@ function SSTile(props) {
1994
2072
  insert(_el$2, (() => {
1995
2073
  var _c$4 = memo(() => !!props.trailing);
1996
2074
  return () => _c$4() && (() => {
1997
- var _el$9 = _tmpl$64();
2075
+ var _el$9 = _tmpl$65();
1998
2076
  insert(_el$9, () => props.trailing);
1999
2077
  return _el$9;
2000
2078
  })();
@@ -2028,4 +2106,4 @@ function createSSTile(build) {
2028
2106
  };
2029
2107
  }
2030
2108
 
2031
- export { SSButton, SSCallout, SSChip, SSDataTable, SSDropdown, SSExpandable, SSForm, SSHeader, SSModal, SSModalsProvider, SSShell, SSSurface, SSTile, createSSTile, useSSModals };
2109
+ export { SSAttrList, SSButton, SSCallout, SSChip, SSDataTable, SSDivider, SSDropdown, SSExpandable, SSForm, SSHeader, SSModal, SSModalsProvider, SSShell, SSSurface, SSTile, createSSTile, useSSModals };
package/dist/index.d.ts CHANGED
@@ -44,6 +44,21 @@ type SSChipDisplayProps = {
44
44
  type SSChipProps = SSChipBaseProps & (SSChipClickableProps | SSChipDismissableProps | SSChipDisplayProps);
45
45
  declare function SSChip(props: SSChipProps): JSX.Element;
46
46
 
47
+ type SSAttrListItem = {
48
+ label: JSXElement;
49
+ value: JSXElement;
50
+ description?: JSXElement;
51
+ icon?: JSXElement;
52
+ action?: JSXElement;
53
+ };
54
+ type SSAttrListProps = {
55
+ items: SSAttrListItem[];
56
+ columns?: number;
57
+ class?: string;
58
+ style?: string;
59
+ };
60
+ declare function SSAttrList(props: SSAttrListProps): solid_js.JSX.Element;
61
+
47
62
  type PromiseOr$3<T> = Promise<T> | T;
48
63
  type SSDataColumn<RowT> = {
49
64
  label: string;
@@ -61,6 +76,13 @@ type SSDataTableProps<RowT extends object> = {
61
76
  };
62
77
  declare function SSDataTable<RowT extends object>(props: SSDataTableProps<RowT>): solid_js.JSX.Element;
63
78
 
79
+ type SSDividerProps = {
80
+ vertical?: boolean;
81
+ class?: string;
82
+ style?: string;
83
+ };
84
+ declare function SSDivider(props: SSDividerProps): solid_js.JSX.Element;
85
+
64
86
  type PromiseOr$2<T> = Promise<T> | T;
65
87
  type SSDropdownItem = {
66
88
  label: string;
@@ -365,4 +387,4 @@ declare function createSSTile<T>(build: (data: T) => SSTileProps): (props: {
365
387
  onLinkClick?: () => void;
366
388
  }) => solid_js.JSX.Element;
367
389
 
368
- export { SSButton, SSCallout, SSChip, type SSColor, SSDataTable, SSDropdown, SSExpandable, SSForm, SSHeader, SSModal, SSModalsProvider, SSShell, SSSurface, SSTile, createSSTile, useSSModals };
390
+ export { SSAttrList, SSButton, SSCallout, SSChip, type SSColor, SSDataTable, SSDivider, SSDropdown, SSExpandable, SSForm, SSHeader, SSModal, SSModalsProvider, SSShell, SSSurface, SSTile, createSSTile, useSSModals };