@sortsys/ui 0.1.34 → 0.1.35

package/dist/dev.js

@@ -441,6 +441,12 @@ function SSDropdown(props) {
   const [renderMenu, setRenderMenu] = createSignal(false);
   const [menuState, setMenuState] = createSignal("closed");
   let rootRef;
+  const visibleItems = () => props.items.map((item, index) => ({
+    item,
+    index
+  })).filter(({
+    item
+  }) => !item.hideIf);
   const close = () => setOpen(false);
   createEffect(() => {
     if (open()) {
@@ -469,64 +475,72 @@ function SSDropdown(props) {
       window.removeEventListener("keydown", handleKeyDown);
     });
   });
-  return (() => {
-    var _el$ = _tmpl$25(), _el$2 = _el$.firstChild;
-    use((el) => rootRef = el, _el$);
-    _el$2.$$click = () => setOpen((value) => !value);
-    insert(_el$2, () => props.icon ?? _tmpl$35());
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return renderMenu();
-      },
-      get children() {
-        var _el$3 = _tmpl$14();
-        insert(_el$3, createComponent(For, {
-          get each() {
-            return props.items.filter((item) => !item.hideIf);
-          },
-          children: (item) => (() => {
-            var _el$5 = _tmpl$43(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
-            _el$5.$$click = async () => {
-              close();
-              await item.onclick?.();
-            };
-            insert(_el$6, () => item.icon);
-            insert(_el$7, () => item.label);
-            insert(_el$5, (() => {
-              var _c$ = memo(() => !!item.checked);
-              return () => _c$() && _tmpl$53();
-            })(), null);
-            effect((_p$) => {
-              var _v$5 = item.checked ? "menuitemcheckbox" : "menuitem", _v$6 = item.checked ? "true" : void 0;
-              _v$5 !== _p$.e && setAttribute(_el$5, "role", _p$.e = _v$5);
-              _v$6 !== _p$.t && setAttribute(_el$5, "aria-checked", _p$.t = _v$6);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0
-            });
-            return _el$5;
-          })()
-        }));
-        effect(() => setAttribute(_el$3, "data-state", menuState()));
-        return _el$3;
-      }
-    }), null);
-    effect((_p$) => {
-      var _v$ = `ss_dropdown ${props.class ?? ""}`, _v$2 = props.style, _v$3 = open(), _v$4 = props.ariaLabel ?? "Aktionen \xF6ffnen";
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _p$.t = style(_el$, _v$2, _p$.t);
-      _v$3 !== _p$.a && setAttribute(_el$2, "aria-expanded", _p$.a = _v$3);
-      _v$4 !== _p$.o && setAttribute(_el$2, "aria-label", _p$.o = _v$4);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    });
-    return _el$;
-  })();
+  return createComponent(Show, {
+    get when() {
+      return visibleItems().length > 0;
+    },
+    get children() {
+      var _el$ = _tmpl$25(), _el$2 = _el$.firstChild;
+      use((el) => rootRef = el, _el$);
+      _el$2.$$click = () => setOpen((value) => !value);
+      insert(_el$2, () => props.icon ?? _tmpl$35());
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return renderMenu();
+        },
+        get children() {
+          var _el$3 = _tmpl$14();
+          insert(_el$3, createComponent(For, {
+            get each() {
+              return visibleItems();
+            },
+            children: ({
+              item,
+              index
+            }) => (() => {
+              var _el$5 = _tmpl$43(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+              _el$5.$$click = async () => {
+                close();
+                await item.onclick?.(index);
+              };
+              insert(_el$6, () => item.icon);
+              insert(_el$7, () => item.label);
+              insert(_el$5, (() => {
+                var _c$ = memo(() => !!item.checked);
+                return () => _c$() && _tmpl$53();
+              })(), null);
+              effect((_p$) => {
+                var _v$5 = item.checked ? "menuitemcheckbox" : "menuitem", _v$6 = item.checked ? "true" : void 0;
+                _v$5 !== _p$.e && setAttribute(_el$5, "role", _p$.e = _v$5);
+                _v$6 !== _p$.t && setAttribute(_el$5, "aria-checked", _p$.t = _v$6);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
+              return _el$5;
+            })()
+          }));
+          effect(() => setAttribute(_el$3, "data-state", menuState()));
+          return _el$3;
+        }
+      }), null);
+      effect((_p$) => {
+        var _v$ = `ss_dropdown ${props.class ?? ""}`, _v$2 = props.style, _v$3 = open(), _v$4 = props.ariaLabel ?? "Aktionen \xF6ffnen";
+        _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+        _p$.t = style(_el$, _v$2, _p$.t);
+        _v$3 !== _p$.a && setAttribute(_el$2, "aria-expanded", _p$.a = _v$3);
+        _v$4 !== _p$.o && setAttribute(_el$2, "aria-label", _p$.o = _v$4);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0
+      });
+      return _el$;
+    }
+  });
 }
 delegateEvents(["click"]);
 var _tmpl$15 = /* @__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__content_inner>`);
@@ -2138,161 +2152,111 @@ function SSSurface(props) {
     return _el$;
   })();
 }
-var _tmpl$41 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$211 = /* @__PURE__ */ template(`<div role=tablist>`);
-var _tmpl$310 = /* @__PURE__ */ template(`<button type=button role=tab>`);
-var SSTabsContext = createContext();
+var _tmpl$41 = /* @__PURE__ */ template(`<div><div class=ss_tablist role=tablist>`);
+var _tmpl$211 = /* @__PURE__ */ template(`<button type=button role=tab>`);
 function SSTabs(props) {
-  const [tabIds, setTabIds] = createSignal([]);
-  const tabElements = /* @__PURE__ */ new Map();
-  const count = createMemo(() => tabIds().length);
-  const registerTab = (id, element) => {
-    let nextIndex = -1;
-    tabElements.set(id, element);
-    setTabIds((prev) => {
-      const existing = prev.indexOf(id);
-      if (existing >= 0) {
-        nextIndex = existing;
-        return prev;
-      }
-      nextIndex = prev.length;
-      return [...prev, id];
+  const visibleTabs = createMemo(() => props.tabs.map((tab, index) => ({
+    ...tab,
+    index
+  })).filter((tab) => !tab.hideIf));
+  let tabRefs = [];
+  const handleSelect = (index) => {
+    if (index === props.selectedIndex) return;
+    props.onChange?.({
+      selectedIndex: index,
+      previousIndex: props.selectedIndex
     });
-    return nextIndex;
-  };
-  const unregisterTab = (id) => {
-    tabElements.delete(id);
-    setTabIds((prev) => prev.filter((entry) => entry !== id));
   };
-  const focusTab = (index) => {
-    const id = tabIds()[index];
-    if (!id) return;
-    tabElements.get(id)?.focus();
+  const focusTab = (position) => {
+    const target = tabRefs[position];
+    if (!target) return;
+    target.focus();
   };
-  const onSelect = (nextIndex) => {
-    const prevIndex = props.selectedIndex;
-    if (nextIndex === prevIndex) return;
-    props.onChange?.({
-      selectedIndex: nextIndex,
-      previousIndex: prevIndex
-    });
+  const handleKeyDown = (event, position) => {
+    const tabs = visibleTabs();
+    if (!tabs.length) return;
+    let nextPosition = position;
+    if (event.key === "ArrowRight") {
+      nextPosition = (position + 1) % tabs.length;
+    } else if (event.key === "ArrowLeft") {
+      nextPosition = (position - 1 + tabs.length) % tabs.length;
+    } else if (event.key === "Home") {
+      nextPosition = 0;
+    } else if (event.key === "End") {
+      nextPosition = tabs.length - 1;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    const nextTab = tabs[nextPosition];
+    if (!nextTab || nextTab.disabled) {
+      focusTab(nextPosition);
+      return;
+    }
+    handleSelect(nextTab.index);
+    requestAnimationFrame(() => focusTab(nextPosition));
   };
-  return createComponent(SSTabsContext.Provider, {
-    value: {
-      selectedIndex: () => props.selectedIndex,
-      count,
-      registerTab,
-      unregisterTab,
-      onSelect,
-      focusTab
+  return createComponent(Show, {
+    get when() {
+      return visibleTabs().length > 0;
     },
     get children() {
-      var _el$ = _tmpl$41();
-      insert(_el$, () => props.children);
+      var _el$ = _tmpl$41(), _el$2 = _el$.firstChild;
+      insert(_el$2, createComponent(For, {
+        get each() {
+          return visibleTabs();
+        },
+        children: (tab, position) => {
+          const isSelected = () => tab.index === props.selectedIndex;
+          return (() => {
+            var _el$3 = _tmpl$211();
+            _el$3.$$keydown = (event) => handleKeyDown(event, position());
+            _el$3.$$click = () => {
+              if (tab.disabled) return;
+              handleSelect(tab.index);
+            };
+            use((el) => tabRefs[position()] = el, _el$3);
+            insert(_el$3, () => tab.label);
+            effect((_p$) => {
+              var _v$4 = `ss_tab ${tab.class ?? ""}`, _v$5 = tab.style, _v$6 = isSelected(), _v$7 = tab.disabled ? "true" : void 0, _v$8 = isSelected() ? 0 : -1, _v$9 = tab.disabled;
+              _v$4 !== _p$.e && className(_el$3, _p$.e = _v$4);
+              _p$.t = style(_el$3, _v$5, _p$.t);
+              _v$6 !== _p$.a && setAttribute(_el$3, "aria-selected", _p$.a = _v$6);
+              _v$7 !== _p$.o && setAttribute(_el$3, "aria-disabled", _p$.o = _v$7);
+              _v$8 !== _p$.i && setAttribute(_el$3, "tabindex", _p$.i = _v$8);
+              _v$9 !== _p$.n && (_el$3.disabled = _p$.n = _v$9);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0,
+              i: void 0,
+              n: void 0
+            });
+            return _el$3;
+          })();
+        }
+      }));
       effect((_p$) => {
-        var _v$ = `ss_tabs ${props.class ?? ""}`, _v$2 = props.style;
+        var _v$ = `ss_tabs ${props.class ?? ""}`, _v$2 = props.style, _v$3 = props.ariaLabel;
         _v$ !== _p$.e && className(_el$, _p$.e = _v$);
         _p$.t = style(_el$, _v$2, _p$.t);
+        _v$3 !== _p$.a && setAttribute(_el$2, "aria-label", _p$.a = _v$3);
         return _p$;
       }, {
         e: void 0,
-        t: void 0
+        t: void 0,
+        a: void 0
       });
       return _el$;
     }
   });
 }
-function SSTabList(props) {
-  return (() => {
-    var _el$2 = _tmpl$211();
-    insert(_el$2, () => props.children);
-    effect((_p$) => {
-      var _v$3 = `ss_tablist ${props.class ?? ""}`, _v$4 = props.style, _v$5 = props.ariaLabel;
-      _v$3 !== _p$.e && className(_el$2, _p$.e = _v$3);
-      _p$.t = style(_el$2, _v$4, _p$.t);
-      _v$5 !== _p$.a && setAttribute(_el$2, "aria-label", _p$.a = _v$5);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    return _el$2;
-  })();
-}
-function SSTab(props) {
-  if (props.hideIf) return null;
-  const context = useContext(SSTabsContext);
-  if (!context) {
-    throw new Error("SSTab must be used within SSTabs");
-  }
-  const id = createUniqueId();
-  const [index, setIndex] = createSignal(null);
-  let buttonRef;
-  onMount(() => {
-    if (!buttonRef) return;
-    setIndex(context.registerTab(id, buttonRef));
-  });
-  onCleanup(() => {
-    context.unregisterTab(id);
-  });
-  const isSelected = () => index() !== null && index() === context.selectedIndex();
-  const handleSelect = () => {
-    if (props.disabled) return;
-    if (index() === null) return;
-    context.onSelect(index());
-  };
-  const handleKeyDown = (event) => {
-    if (props.disabled) return;
-    const current = index();
-    const total = context.count();
-    if (current === null || total < 1) return;
-    let nextIndex = current;
-    if (event.key === "ArrowRight") {
-      nextIndex = (current + 1) % total;
-    } else if (event.key === "ArrowLeft") {
-      nextIndex = (current - 1 + total) % total;
-    } else if (event.key === "Home") {
-      nextIndex = 0;
-    } else if (event.key === "End") {
-      nextIndex = total - 1;
-    } else {
-      return;
-    }
-    event.preventDefault();
-    context.onSelect(nextIndex);
-    requestAnimationFrame(() => context.focusTab(nextIndex));
-  };
-  return (() => {
-    var _el$3 = _tmpl$310();
-    _el$3.$$keydown = handleKeyDown;
-    _el$3.$$click = handleSelect;
-    use((el) => buttonRef = el, _el$3);
-    insert(_el$3, () => props.children);
-    effect((_p$) => {
-      var _v$6 = `ss_tab ${props.class ?? ""}`, _v$7 = props.style, _v$8 = isSelected(), _v$9 = props.disabled ? "true" : void 0, _v$0 = isSelected() ? 0 : -1, _v$1 = props.disabled;
-      _v$6 !== _p$.e && className(_el$3, _p$.e = _v$6);
-      _p$.t = style(_el$3, _v$7, _p$.t);
-      _v$8 !== _p$.a && setAttribute(_el$3, "aria-selected", _p$.a = _v$8);
-      _v$9 !== _p$.o && setAttribute(_el$3, "aria-disabled", _p$.o = _v$9);
-      _v$0 !== _p$.i && setAttribute(_el$3, "tabindex", _p$.i = _v$0);
-      _v$1 !== _p$.n && (_el$3.disabled = _p$.n = _v$1);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0
-    });
-    return _el$3;
-  })();
-}
 delegateEvents(["click", "keydown"]);
 var _tmpl$47 = /* @__PURE__ */ template(`<div><div class=ss_tile__row><div class=ss_tile__content>`);
 var _tmpl$212 = /* @__PURE__ */ template(`<span class=ss_tile__icon>`);
-var _tmpl$311 = /* @__PURE__ */ template(`<h5 class=ss_tile__title>`);
+var _tmpl$310 = /* @__PURE__ */ template(`<h5 class=ss_tile__title>`);
 var _tmpl$48 = /* @__PURE__ */ template(`<h5 class=ss_tile__title><span class=ss_tile__text>`);
 var _tmpl$57 = /* @__PURE__ */ template(`<div class=ss_tile__subtitle>`);
 var _tmpl$64 = /* @__PURE__ */ template(`<div class=ss_tile__trailing>`);
@@ -2311,7 +2275,7 @@ function SSTile(props) {
     insert(_el$3, (() => {
       var _c$2 = memo(() => !!props.href);
       return () => _c$2() ? (() => {
-        var _el$5 = _tmpl$311();
+        var _el$5 = _tmpl$310();
         insert(_el$5, createComponent(SSLink, {
           get href() {
             return props.href;
@@ -2426,4 +2390,4 @@ var SSAwaited = (props) => {
   });
 };
 
-export { SSAttrList, SSAwaited, SSButton, SSCallout, SSChip, SSDataTable, SSDivider, SSDropdown, SSExpandable, SSForm, SSHeader, SSLink, SSModal, SSModalsProvider, SSRow, SSShell, SSSurface, SSTab, SSTabList, SSTabs, SSTile, createSSTile, useSSModals };
+export { SSAttrList, SSAwaited, SSButton, SSCallout, SSChip, SSDataTable, SSDivider, SSDropdown, SSExpandable, SSForm, SSHeader, SSLink, SSModal, SSModalsProvider, SSRow, SSShell, SSSurface, SSTabs, SSTile, createSSTile, useSSModals };

package/dist/index.d.ts

@@ -87,7 +87,7 @@ type PromiseOr$2<T> = Promise<T> | T;
 type SSDropdownItem = {
     label: string;
     icon: JSXElement;
-    onclick?: () => PromiseOr$2<any>;
+    onclick?: (index?: number) => PromiseOr$2<any>;
     checked?: boolean;
     hideIf?: boolean;
 };
@@ -388,33 +388,25 @@ type SSSurfaceProps = {
 };
 declare function SSSurface(props: SSSurfaceProps): solid_js.JSX.Element;
 
-type SSTabsOnChange = (props: {
-    selectedIndex: number;
-    previousIndex: number;
-}) => void;
-type SSTabsProps = {
-    selectedIndex: number;
-    onChange?: SSTabsOnChange;
-    children: JSXElement;
+type SSTabItem = {
+    label: JSXElement;
+    hideIf?: boolean;
+    disabled?: boolean;
     class?: string;
     style?: string;
 };
-type SSTabListProps = {
-    children: JSXElement;
-    class?: string;
-    style?: string;
+type SSTabsProps = {
+    tabs: SSTabItem[];
+    selectedIndex: number;
+    onChange?: (props: {
+        selectedIndex: number;
+        previousIndex: number;
+    }) => void;
     ariaLabel?: string;
-};
-type SSTabProps = {
-    children: JSXElement;
-    disabled?: boolean;
-    hideIf?: boolean;
     class?: string;
     style?: string;
 };
 declare function SSTabs(props: SSTabsProps): solid_js.JSX.Element;
-declare function SSTabList(props: SSTabListProps): solid_js.JSX.Element;
-declare function SSTab(props: SSTabProps): solid_js.JSX.Element;
 
 type SSTileProps = {
     icon?: JSXElement;
@@ -448,4 +440,4 @@ type AwaitedProps = {
 declare function _Awaited(props: AwaitedProps): solid_js.JSX.Element;
 declare const SSAwaited: typeof _Awaited;
 
-export { SSAttrList, SSAwaited, SSButton, SSCallout, SSChip, type SSColor, SSDataTable, SSDivider, SSDropdown, SSExpandable, SSForm, SSHeader, SSLink, SSModal, SSModalsProvider, SSRow, SSShell, SSSurface, SSTab, SSTabList, SSTabs, SSTile, createSSTile, useSSModals };
+export { SSAttrList, SSAwaited, SSButton, SSCallout, SSChip, type SSColor, SSDataTable, SSDivider, SSDropdown, SSExpandable, SSForm, SSHeader, SSLink, SSModal, SSModalsProvider, SSRow, SSShell, SSSurface, SSTabs, SSTile, createSSTile, useSSModals };

package/dist/index.js

@@ -441,6 +441,12 @@ function SSDropdown(props) {
   const [renderMenu, setRenderMenu] = createSignal(false);
   const [menuState, setMenuState] = createSignal("closed");
   let rootRef;
+  const visibleItems = () => props.items.map((item, index) => ({
+    item,
+    index
+  })).filter(({
+    item
+  }) => !item.hideIf);
   const close = () => setOpen(false);
   createEffect(() => {
     if (open()) {
@@ -469,64 +475,72 @@ function SSDropdown(props) {
       window.removeEventListener("keydown", handleKeyDown);
     });
   });
-  return (() => {
-    var _el$ = _tmpl$25(), _el$2 = _el$.firstChild;
-    use((el) => rootRef = el, _el$);
-    _el$2.$$click = () => setOpen((value) => !value);
-    insert(_el$2, () => props.icon ?? _tmpl$35());
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return renderMenu();
-      },
-      get children() {
-        var _el$3 = _tmpl$14();
-        insert(_el$3, createComponent(For, {
-          get each() {
-            return props.items.filter((item) => !item.hideIf);
-          },
-          children: (item) => (() => {
-            var _el$5 = _tmpl$43(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
-            _el$5.$$click = async () => {
-              close();
-              await item.onclick?.();
-            };
-            insert(_el$6, () => item.icon);
-            insert(_el$7, () => item.label);
-            insert(_el$5, (() => {
-              var _c$ = memo(() => !!item.checked);
-              return () => _c$() && _tmpl$53();
-            })(), null);
-            effect((_p$) => {
-              var _v$5 = item.checked ? "menuitemcheckbox" : "menuitem", _v$6 = item.checked ? "true" : void 0;
-              _v$5 !== _p$.e && setAttribute(_el$5, "role", _p$.e = _v$5);
-              _v$6 !== _p$.t && setAttribute(_el$5, "aria-checked", _p$.t = _v$6);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0
-            });
-            return _el$5;
-          })()
-        }));
-        effect(() => setAttribute(_el$3, "data-state", menuState()));
-        return _el$3;
-      }
-    }), null);
-    effect((_p$) => {
-      var _v$ = `ss_dropdown ${props.class ?? ""}`, _v$2 = props.style, _v$3 = open(), _v$4 = props.ariaLabel ?? "Aktionen \xF6ffnen";
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _p$.t = style(_el$, _v$2, _p$.t);
-      _v$3 !== _p$.a && setAttribute(_el$2, "aria-expanded", _p$.a = _v$3);
-      _v$4 !== _p$.o && setAttribute(_el$2, "aria-label", _p$.o = _v$4);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    });
-    return _el$;
-  })();
+  return createComponent(Show, {
+    get when() {
+      return visibleItems().length > 0;
+    },
+    get children() {
+      var _el$ = _tmpl$25(), _el$2 = _el$.firstChild;
+      use((el) => rootRef = el, _el$);
+      _el$2.$$click = () => setOpen((value) => !value);
+      insert(_el$2, () => props.icon ?? _tmpl$35());
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return renderMenu();
+        },
+        get children() {
+          var _el$3 = _tmpl$14();
+          insert(_el$3, createComponent(For, {
+            get each() {
+              return visibleItems();
+            },
+            children: ({
+              item,
+              index
+            }) => (() => {
+              var _el$5 = _tmpl$43(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+              _el$5.$$click = async () => {
+                close();
+                await item.onclick?.(index);
+              };
+              insert(_el$6, () => item.icon);
+              insert(_el$7, () => item.label);
+              insert(_el$5, (() => {
+                var _c$ = memo(() => !!item.checked);
+                return () => _c$() && _tmpl$53();
+              })(), null);
+              effect((_p$) => {
+                var _v$5 = item.checked ? "menuitemcheckbox" : "menuitem", _v$6 = item.checked ? "true" : void 0;
+                _v$5 !== _p$.e && setAttribute(_el$5, "role", _p$.e = _v$5);
+                _v$6 !== _p$.t && setAttribute(_el$5, "aria-checked", _p$.t = _v$6);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
+              return _el$5;
+            })()
+          }));
+          effect(() => setAttribute(_el$3, "data-state", menuState()));
+          return _el$3;
+        }
+      }), null);
+      effect((_p$) => {
+        var _v$ = `ss_dropdown ${props.class ?? ""}`, _v$2 = props.style, _v$3 = open(), _v$4 = props.ariaLabel ?? "Aktionen \xF6ffnen";
+        _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+        _p$.t = style(_el$, _v$2, _p$.t);
+        _v$3 !== _p$.a && setAttribute(_el$2, "aria-expanded", _p$.a = _v$3);
+        _v$4 !== _p$.o && setAttribute(_el$2, "aria-label", _p$.o = _v$4);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0
+      });
+      return _el$;
+    }
+  });
 }
 delegateEvents(["click"]);
 var _tmpl$15 = /* @__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__content_inner>`);
@@ -2138,161 +2152,111 @@ function SSSurface(props) {
     return _el$;
   })();
 }
-var _tmpl$41 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$211 = /* @__PURE__ */ template(`<div role=tablist>`);
-var _tmpl$310 = /* @__PURE__ */ template(`<button type=button role=tab>`);
-var SSTabsContext = createContext();
+var _tmpl$41 = /* @__PURE__ */ template(`<div><div class=ss_tablist role=tablist>`);
+var _tmpl$211 = /* @__PURE__ */ template(`<button type=button role=tab>`);
 function SSTabs(props) {
-  const [tabIds, setTabIds] = createSignal([]);
-  const tabElements = /* @__PURE__ */ new Map();
-  const count = createMemo(() => tabIds().length);
-  const registerTab = (id, element) => {
-    let nextIndex = -1;
-    tabElements.set(id, element);
-    setTabIds((prev) => {
-      const existing = prev.indexOf(id);
-      if (existing >= 0) {
-        nextIndex = existing;
-        return prev;
-      }
-      nextIndex = prev.length;
-      return [...prev, id];
+  const visibleTabs = createMemo(() => props.tabs.map((tab, index) => ({
+    ...tab,
+    index
+  })).filter((tab) => !tab.hideIf));
+  let tabRefs = [];
+  const handleSelect = (index) => {
+    if (index === props.selectedIndex) return;
+    props.onChange?.({
+      selectedIndex: index,
+      previousIndex: props.selectedIndex
     });
-    return nextIndex;
-  };
-  const unregisterTab = (id) => {
-    tabElements.delete(id);
-    setTabIds((prev) => prev.filter((entry) => entry !== id));
   };
-  const focusTab = (index) => {
-    const id = tabIds()[index];
-    if (!id) return;
-    tabElements.get(id)?.focus();
+  const focusTab = (position) => {
+    const target = tabRefs[position];
+    if (!target) return;
+    target.focus();
   };
-  const onSelect = (nextIndex) => {
-    const prevIndex = props.selectedIndex;
-    if (nextIndex === prevIndex) return;
-    props.onChange?.({
-      selectedIndex: nextIndex,
-      previousIndex: prevIndex
-    });
+  const handleKeyDown = (event, position) => {
+    const tabs = visibleTabs();
+    if (!tabs.length) return;
+    let nextPosition = position;
+    if (event.key === "ArrowRight") {
+      nextPosition = (position + 1) % tabs.length;
+    } else if (event.key === "ArrowLeft") {
+      nextPosition = (position - 1 + tabs.length) % tabs.length;
+    } else if (event.key === "Home") {
+      nextPosition = 0;
+    } else if (event.key === "End") {
+      nextPosition = tabs.length - 1;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    const nextTab = tabs[nextPosition];
+    if (!nextTab || nextTab.disabled) {
+      focusTab(nextPosition);
+      return;
+    }
+    handleSelect(nextTab.index);
+    requestAnimationFrame(() => focusTab(nextPosition));
   };
-  return createComponent(SSTabsContext.Provider, {
-    value: {
-      selectedIndex: () => props.selectedIndex,
-      count,
-      registerTab,
-      unregisterTab,
-      onSelect,
-      focusTab
+  return createComponent(Show, {
+    get when() {
+      return visibleTabs().length > 0;
     },
     get children() {
-      var _el$ = _tmpl$41();
-      insert(_el$, () => props.children);
+      var _el$ = _tmpl$41(), _el$2 = _el$.firstChild;
+      insert(_el$2, createComponent(For, {
+        get each() {
+          return visibleTabs();
+        },
+        children: (tab, position) => {
+          const isSelected = () => tab.index === props.selectedIndex;
+          return (() => {
+            var _el$3 = _tmpl$211();
+            _el$3.$$keydown = (event) => handleKeyDown(event, position());
+            _el$3.$$click = () => {
+              if (tab.disabled) return;
+              handleSelect(tab.index);
+            };
+            use((el) => tabRefs[position()] = el, _el$3);
+            insert(_el$3, () => tab.label);
+            effect((_p$) => {
+              var _v$4 = `ss_tab ${tab.class ?? ""}`, _v$5 = tab.style, _v$6 = isSelected(), _v$7 = tab.disabled ? "true" : void 0, _v$8 = isSelected() ? 0 : -1, _v$9 = tab.disabled;
+              _v$4 !== _p$.e && className(_el$3, _p$.e = _v$4);
+              _p$.t = style(_el$3, _v$5, _p$.t);
+              _v$6 !== _p$.a && setAttribute(_el$3, "aria-selected", _p$.a = _v$6);
+              _v$7 !== _p$.o && setAttribute(_el$3, "aria-disabled", _p$.o = _v$7);
+              _v$8 !== _p$.i && setAttribute(_el$3, "tabindex", _p$.i = _v$8);
+              _v$9 !== _p$.n && (_el$3.disabled = _p$.n = _v$9);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0,
+              i: void 0,
+              n: void 0
+            });
+            return _el$3;
+          })();
+        }
+      }));
       effect((_p$) => {
-        var _v$ = `ss_tabs ${props.class ?? ""}`, _v$2 = props.style;
+        var _v$ = `ss_tabs ${props.class ?? ""}`, _v$2 = props.style, _v$3 = props.ariaLabel;
         _v$ !== _p$.e && className(_el$, _p$.e = _v$);
         _p$.t = style(_el$, _v$2, _p$.t);
+        _v$3 !== _p$.a && setAttribute(_el$2, "aria-label", _p$.a = _v$3);
         return _p$;
       }, {
         e: void 0,
-        t: void 0
+        t: void 0,
+        a: void 0
       });
       return _el$;
     }
   });
 }
-function SSTabList(props) {
-  return (() => {
-    var _el$2 = _tmpl$211();
-    insert(_el$2, () => props.children);
-    effect((_p$) => {
-      var _v$3 = `ss_tablist ${props.class ?? ""}`, _v$4 = props.style, _v$5 = props.ariaLabel;
-      _v$3 !== _p$.e && className(_el$2, _p$.e = _v$3);
-      _p$.t = style(_el$2, _v$4, _p$.t);
-      _v$5 !== _p$.a && setAttribute(_el$2, "aria-label", _p$.a = _v$5);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    return _el$2;
-  })();
-}
-function SSTab(props) {
-  if (props.hideIf) return null;
-  const context = useContext(SSTabsContext);
-  if (!context) {
-    throw new Error("SSTab must be used within SSTabs");
-  }
-  const id = createUniqueId();
-  const [index, setIndex] = createSignal(null);
-  let buttonRef;
-  onMount(() => {
-    if (!buttonRef) return;
-    setIndex(context.registerTab(id, buttonRef));
-  });
-  onCleanup(() => {
-    context.unregisterTab(id);
-  });
-  const isSelected = () => index() !== null && index() === context.selectedIndex();
-  const handleSelect = () => {
-    if (props.disabled) return;
-    if (index() === null) return;
-    context.onSelect(index());
-  };
-  const handleKeyDown = (event) => {
-    if (props.disabled) return;
-    const current = index();
-    const total = context.count();
-    if (current === null || total < 1) return;
-    let nextIndex = current;
-    if (event.key === "ArrowRight") {
-      nextIndex = (current + 1) % total;
-    } else if (event.key === "ArrowLeft") {
-      nextIndex = (current - 1 + total) % total;
-    } else if (event.key === "Home") {
-      nextIndex = 0;
-    } else if (event.key === "End") {
-      nextIndex = total - 1;
-    } else {
-      return;
-    }
-    event.preventDefault();
-    context.onSelect(nextIndex);
-    requestAnimationFrame(() => context.focusTab(nextIndex));
-  };
-  return (() => {
-    var _el$3 = _tmpl$310();
-    _el$3.$$keydown = handleKeyDown;
-    _el$3.$$click = handleSelect;
-    use((el) => buttonRef = el, _el$3);
-    insert(_el$3, () => props.children);
-    effect((_p$) => {
-      var _v$6 = `ss_tab ${props.class ?? ""}`, _v$7 = props.style, _v$8 = isSelected(), _v$9 = props.disabled ? "true" : void 0, _v$0 = isSelected() ? 0 : -1, _v$1 = props.disabled;
-      _v$6 !== _p$.e && className(_el$3, _p$.e = _v$6);
-      _p$.t = style(_el$3, _v$7, _p$.t);
-      _v$8 !== _p$.a && setAttribute(_el$3, "aria-selected", _p$.a = _v$8);
-      _v$9 !== _p$.o && setAttribute(_el$3, "aria-disabled", _p$.o = _v$9);
-      _v$0 !== _p$.i && setAttribute(_el$3, "tabindex", _p$.i = _v$0);
-      _v$1 !== _p$.n && (_el$3.disabled = _p$.n = _v$1);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0
-    });
-    return _el$3;
-  })();
-}
 delegateEvents(["click", "keydown"]);
 var _tmpl$47 = /* @__PURE__ */ template(`<div><div class=ss_tile__row><div class=ss_tile__content>`);
 var _tmpl$212 = /* @__PURE__ */ template(`<span class=ss_tile__icon>`);
-var _tmpl$311 = /* @__PURE__ */ template(`<h5 class=ss_tile__title>`);
+var _tmpl$310 = /* @__PURE__ */ template(`<h5 class=ss_tile__title>`);
 var _tmpl$48 = /* @__PURE__ */ template(`<h5 class=ss_tile__title><span class=ss_tile__text>`);
 var _tmpl$57 = /* @__PURE__ */ template(`<div class=ss_tile__subtitle>`);
 var _tmpl$64 = /* @__PURE__ */ template(`<div class=ss_tile__trailing>`);
@@ -2311,7 +2275,7 @@ function SSTile(props) {
     insert(_el$3, (() => {
       var _c$2 = memo(() => !!props.href);
       return () => _c$2() ? (() => {
-        var _el$5 = _tmpl$311();
+        var _el$5 = _tmpl$310();
         insert(_el$5, createComponent(SSLink, {
           get href() {
             return props.href;
@@ -2426,4 +2390,4 @@ var SSAwaited = (props) => {
   });
 };
 
-export { SSAttrList, SSAwaited, SSButton, SSCallout, SSChip, SSDataTable, SSDivider, SSDropdown, SSExpandable, SSForm, SSHeader, SSLink, SSModal, SSModalsProvider, SSRow, SSShell, SSSurface, SSTab, SSTabList, SSTabs, SSTile, createSSTile, useSSModals };
+export { SSAttrList, SSAwaited, SSButton, SSCallout, SSChip, SSDataTable, SSDivider, SSDropdown, SSExpandable, SSForm, SSHeader, SSLink, SSModal, SSModalsProvider, SSRow, SSShell, SSSurface, SSTabs, SSTile, createSSTile, useSSModals };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sortsys/ui",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "description": "Simple and beautiful UI library for sortsys",
   "license": "MIT",
   "author": "Ludwig Lehnert",