tecitheme 0.11.3 → 0.11.5

package/dist/components/FeatureTable.svelte

@@ -125,7 +125,7 @@
 
 </script>
 
-<div id={id} class="flex flex-col space-y-4">
+<div id={id} class="relative flex flex-col space-y-4">
 
   <!-- Hero -->
   <div class="flow-root bg-gradient-to-b {getColorStyles("gradient-dark", data.color)} py-16 sm:pt-32">
@@ -217,13 +217,13 @@
   </div>
 
   <!-- Desktop Table Headings -->
-  <div class="hidden sticky top-0 bg-white sm:flex flex-row space-x-8 w-full items-end z-20 border-b shadow-lg">
-    <div class="w-full py-8"></div>
+  <div class="hidden sticky top-16 bg-white sm:flex flex-row space-x-8 w-full z-20 border-b shadow-lg">
+    <div class="w-full pt-8"></div>
     {#each $selectedTable.columns as column}
-      <div class="-mt-px border-b-2 w-full border-transparent py-8 {column.highlightOption ? getColorStyles("border", data.color) : ""}">
+      <div class="-mt-px border-b-2 w-full border-transparent pt-8 {column.highlightOption ? getColorStyles("border", data.color) : ""}">
           <h3 class="font-semibold leading-6 text-gray-900 {column.highlightOption ? getColorStyles("text", data.color) : ""}">{column.name}</h3>
           {#if column.description}
-            <p class="mt-1 text-sm leading-6 text-gray-600">{column.description}</p>
+            <p class="mt-1 text-sm leading-6 text-gray-600">{@html column.description}</p>
           {/if}
       </div>
     {/each}
@@ -233,7 +233,7 @@
   {#each Object.values($selectedTable.categories) as category, categoryIndex}
 
     <!-- Category Name -->
-    <h4 class="hidden sm:block sticky top-20 z-20 bg-white font-semibold leading-6 text-gray-900">{category.name}</h4>
+    <h4 class="hidden sm:block sticky top-32 z-20 bg-white font-semibold leading-6 text-gray-900 px-4 py-2 w-fit">{category.name}</h4>
 
     <!-- Table -->
     <div class="hidden relative sm:flex flex-col w-full pt-8 shadow-lg">
@@ -249,7 +249,7 @@
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
                   </svg> 
-                  <div class="absolute hidden group-hover:block bg-white border shadow-lg p-2 w-48 z-10 text-center left-1/2 -translate-x-1/2">
+                  <div class="absolute hidden group-hover:block bg-white border shadow-lg p-2 w-48 z-30 text-center left-1/2 -translate-x-1/2">
                     <p>{@html feature.helpText}</p>
                   </div>                       
                 </span>
@@ -302,13 +302,13 @@
   <!-- Mobile Tables -->
   {#each $selectedTable.columns as column}
     <!-- Mobile table headings  -->
-    <div class="sm:hidden sticky top-0 flex flex-row bg-white z-20 w-full">
+    <div class="sm:hidden sticky top-16 flex flex-row bg-white z-20 w-full">
       <div class="flex flex-col w-full border-t py-8 {column.highlightOption ? getColorStyles("border", data.color) : ""}">
         <h3 class="font-semibold leading-6 text-gray-900 {column.highlightOption ? getColorStyles("text", data.color) : ""}">
           {column.name}
         </h3>
         {#if column.description}
-          <p>{column.description}</p>
+          <p>{@html column.description}</p>
         {/if}
       </div>
       <div class="border-t w-full" />
@@ -320,7 +320,7 @@
       {#if sortFeaturesByOrder(category.features, column.name).length > 0}
     
         <!-- Category Headings -->
-        <h4 class="sticky top-20 sm:hidden block text-sm font-semibold leading-6 text-gray-900 w-full bg-white z-20 py-4">{category.name}</h4>
+        <h4 class="sticky top-44 sm:hidden block font-semibold leading-6 text-gray-900 w-full bg-white z-20 py-2">{category.name}</h4>
 
         <div class="sm:hidden relative flex flex-col">
           <!-- Tables -->
@@ -340,7 +340,7 @@
                       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
                       </svg> 
-                      <div class="absolute hidden group-hover:block bg-white border shadow-lg p-2 w-48 z-10 text-center left-1/2 -translate-x-1/2">
+                      <div class="absolute hidden group-hover:block bg-white border shadow-lg p-2 w-48 z-30 text-center left-1/2 -translate-x-1/2">
                         <p>{@html feature.helpText}</p>
                       </div>                       
                     </span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.11.3",
+  "version": "0.11.5",
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",