@likable-hair/svelte 4.0.9 → 4.0.11

package/dist/components/composed/list/DynamicTable.svelte

@@ -44,6 +44,7 @@ onMount(() => {
     table.classList.add('dynamic-resizable');
     resizeObserver = new ResizeObserver(() => {
         updateRemainingWidth();
+        updateHeaderHeight();
     });
     if (tableContainer) {
         resizeObserver.observe(tableContainer);
@@ -1138,7 +1139,7 @@ function resizeHeader(th, header) {
               {/if}
             </th>
           {/each}
-          {#if remainingWidth && (customizeHeaders || resizableColumns)}
+          {#if remainingWidth && (customizeHeaders || rowAppendSnippet || resizableColumns)}
             <th
               style:width={remainingWidth + 'px'}
               class="filler"
@@ -1291,7 +1292,7 @@ function resizeHeader(th, header) {
                   {/if}
                 </td>
               {/each}
-              {#if remainingWidth && (customizeHeaders || resizableColumns)}
+              {#if remainingWidth && (customizeHeaders || rowAppendSnippet || resizableColumns)}
                 <td></td>
               {/if}
               {#if rowAppendSnippet}

package/dist/components/simple/navigation/TabSwitcher.svelte

@@ -3,24 +3,15 @@
 
 <script lang="ts">import { onMount } from "svelte";
 import './TabSwitcher.css';
-import { BROWSER } from 'esm-env';
 import Icon from "../media/Icon.svelte";
-let { tabs = [], selected = $bindable(undefined), mandatory = true, class: clazz = {}, ontabClick, ontabKeypress, appendSnippet, } = $props();
+let { tabs = [], selected = $bindable(undefined), mandatory = true, class: clazz = {}, ontabClick, appendSnippet, } = $props();
 let tabButtons = {};
 onMount(() => {
     if (mandatory && !selected && tabs.length > 0)
         selected = tabs[0].name;
-    if (selected) {
-        setBookmarkPosition();
-    }
-});
-$effect(() => {
-    setBookmarkPosition();
 });
-let bookmarkWidth = $state(0), bookmarkLeft = $state(0);
 function handleTabClick(clickedTab, nativeEvent) {
     selected = clickedTab.name;
-    setBookmarkPosition();
     if (ontabClick) {
         ontabClick({
             detail: {
@@ -30,50 +21,23 @@ function handleTabClick(clickedTab, nativeEvent) {
         });
     }
 }
-function handleTabKeypress(clickedTab, nativeEvent) {
-    selected = clickedTab.name;
-    setBookmarkPosition();
-    if (ontabKeypress) {
-        ontabKeypress({
-            detail: {
-                nativeEvent,
-                tab: clickedTab
-            }
-        });
-    }
-}
-function setBookmarkPosition() {
-    if (BROWSER) {
-        let tabButton = selected
-            ? tabButtons[selected]
-            : undefined;
-        if (tabButton) {
-            bookmarkWidth = tabButton.offsetWidth - 10;
-            bookmarkLeft = tabButton.offsetLeft + 5;
-        }
-    }
-}
-$effect(() => { if (!!selected)
-    setBookmarkPosition(); });
 </script>
 
 <div
   class="{clazz.container || ''} tabs-container"
 >
   {#each tabs as tab}
-    <div
-      role="presentation"
+    <button
       class:selected-tab={tab.name == selected}
       class="tab-label {clazz.tabs || ''} {tab.name == selected ? clazz.selected || '' : ''}"
       onclick={(event) => handleTabClick(tab, event)}
-      onkeypress={(event) => handleTabKeypress(tab, event)}
       bind:this={tabButtons[tab.name]}
     >
       {#if !!tab.icon}
         <Icon name={tab.icon}></Icon>
       {/if}
       {tab.label}
-    </div>
+    </button>
   {/each}
   {#if appendSnippet}
     <div
@@ -84,11 +48,6 @@ $effect(() => { if (!!selected)
       {@render appendSnippet()}
     </div>
   {/if}
-  <span
-    style:left={bookmarkLeft + "px"}
-    style:width={bookmarkWidth + "px"}
-    class="{clazz.bookmark || ''} bookmark"
-  ></span>
   <span
     class="{clazz.guide || ''} horizontal-guide"
   ></span>
@@ -110,6 +69,21 @@ $effect(() => { if (!!selected)
     );
   }
 
+  button {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    outline: none;  
+  }
+
+  button:focus {
+    outline: none;
+  }
+
   .selected-tab {
     color: var(
       --tab-switcher-selected-color,
@@ -117,9 +91,21 @@ $effect(() => { if (!!selected)
     );
   }
 
+  .selected-tab::after {
+    content: '';
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    height: 2px;
+    background-color: var(
+      --tab-switcher-bookmark-color,
+      var(--tab-switcher-default-bookmark-color)
+    );
+  }
+
   .horizontal-guide {
     position: absolute;
-    z-index: 5;
     bottom: 0px;
     height: 1px;
     background-color: var(
@@ -139,18 +125,6 @@ $effect(() => { if (!!selected)
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     cursor: pointer;
     padding: 8px;
-  }
-
-  .bookmark {
-    position: absolute;
-    bottom: 0px;
-    height: 2px;
-    border-radius: 0.125rem;
-    z-index: 10;
-    background-color: var(
-      --tab-switcher-bookmark-color,
-      var(--tab-switcher-default-bookmark-color)
-    );
-    transition: left 400ms, width 400ms;
+    position: relative;
   }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "4.0.9",
+  "version": "4.0.11",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",