fix: extends svelte/element for Span, P, Secondary

Author: shinokada

src/lib/typography/Li.svelte

@@ -2,19 +2,19 @@
   import type { Snippet } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import { getContext } from 'svelte';
+  import type { HTMLLiAttributes } from 'svelte/elements';
 
-  interface Props {
+  interface Props extends HTMLLiAttributes{
     children: Snippet;
     icon?: boolean;
-    liClass?: string | undefined;
+    class?: string | undefined;
   }
 
-  let { children, icon, liClass, ...attributes }: Props = $props();
+  let { children, icon, class: className, ...attributes }: Props = $props();
   const ctxclass: string = getContext('ctxclass');
-  let classLi: string = twMerge(liClass, ctxclass, icon && 'flex items-center');
 </script>
 
-<li {...attributes} class={classLi}>
+<li {...attributes} class={twMerge(className, ctxclass, icon && 'flex items-center')}>
   {@render children()}
 </li>
 
@@ -24,6 +24,6 @@
 ## Props
 @prop children
 @prop icon
-@prop liClass
+@prop class
 @prop ...attributes
 -->

src/lib/typography/Mark.svelte

@@ -1,20 +1,24 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { twMerge } from 'tailwind-merge';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-  interface Props {
+  interface Props extends HTMLAttributes<HTMLElement>{
     children: Snippet;
+    markClass?: string | undefined;
     class?: string | undefined;
   }
 
-  let { children, class: className, ...attributes }: Props = $props();
-  let markCls: string = 'text-white dark:bg-blue-500 bg-blue-600 px-2 rounded';
+  let { 
+    children, 
+    markClass = 'text-white dark:bg-blue-500 bg-blue-600 px-2 rounded',
+    class: className, ...attributes 
+  }: Props = $props();
+  
 </script>
 
-<mark {...attributes} class={twMerge(markCls, className)}>
- 
-    {@render children()}
-
+<mark {...attributes} class={twMerge(markClass, className)}>
+  {@render children()}
 </mark>
 
 <!--

src/lib/typography/P.svelte

@@ -2,8 +2,9 @@
   import type { Snippet } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import type { PsizeType, PweightType, SpaceType } from '../types';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-  interface Props {
+  interface Props extends HTMLAttributes<HTMLParagraphElement>{
     children: Snippet;
     color?: string | undefined;
     class?: string | undefined;

src/lib/typography/Secondary.svelte

@@ -1,16 +1,22 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { twMerge } from 'tailwind-merge';
-  interface Props {
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLElement>{
     children: Snippet;
-    color?: string;
     secondaryClass?: string;
     class?: string;
   }
-  let { children, color = 'text-gray-500 dark:text-gray-400', secondaryClass = 'font-semibold', class: className, ...attributes }: Props = $props();
+  let { 
+    children,
+    secondaryClass = 'text-gray-500 dark:text-gray-400 font-semibold',
+    class: className, 
+    ...attributes 
+  }: Props = $props();
 </script>
 
-<small {...attributes} class={twMerge(color, secondaryClass, className)}>
+<small {...attributes} class={twMerge(secondaryClass, className)}>
   {@render children()}
 </small>
 

src/lib/typography/Span.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { twMerge } from 'tailwind-merge';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-  interface Props {
+  interface Props extends HTMLAttributes<HTMLSpanElement>{
     children: Snippet;
     italic?: boolean;
     underline?: boolean;

src/routes/pages/coverage/+page.svelte

@@ -304,8 +304,8 @@
 	<Li># of pages: {componentsAnalysis.total}</Li>
 	<Li># of components/pages checked: {componentsAnalysis.pageChecked}</Li>
 	<Li># of components/pages to be completed: {componentsAnalysis.pageUnchecked}</Li>
-	<Li liClass='text-green-500'># of pages without problems: {componentsAnalysis.pageWithoutProblems}</Li>
-	<Li liClass='text-red-500'># of examples to be completed: {componentsAnalysis.exampleProblems}</Li>
+	<Li class='text-green-500'># of pages without problems: {componentsAnalysis.pageWithoutProblems}</Li>
+	<Li class='text-red-500'># of examples to be completed: {componentsAnalysis.exampleProblems}</Li>
 </List>
 
 
@@ -314,17 +314,17 @@
 	<Li># of pages: {formsAnalysis.total}</Li>
 	<Li># of components/pages checked: {formsAnalysis.pageChecked}</Li>
 	<Li># of components/pages to be completed: {formsAnalysis.pageUnchecked}</Li>
-	<Li liClass='text-green-500'># of pages without problems: {formsAnalysis.pageWithoutProblems}</Li>
-	<Li liClass='text-red-500'># of examples to be completed: {formsAnalysis.exampleProblems}</Li>
+	<Li class='text-green-500'># of pages without problems: {formsAnalysis.pageWithoutProblems}</Li>
+	<Li class='text-red-500'># of examples to be completed: {formsAnalysis.exampleProblems}</Li>
 </List>
 
 <H2>Typography</H2>
 <List tag="ul" class="space-y-1 text-gray-500 dark:text-gray-400" list="none">
 	<Li># of pages: {typographyAnalysis.total}</Li>
 	<Li># of components/pages checked: {typographyAnalysis.pageChecked}</Li>
 	<Li># of components/pages to be completed: {typographyAnalysis.pageUnchecked}</Li>
-	<Li liClass='text-green-500'># of pages without problems: {typographyAnalysis.pageWithoutProblems}</Li>
-	<Li liClass='text-red-500'># of examples to be completed: {typographyAnalysis.exampleProblems}</Li>
+	<Li class='text-green-500'># of pages without problems: {typographyAnalysis.pageWithoutProblems}</Li>
+	<Li class='text-red-500'># of examples to be completed: {typographyAnalysis.exampleProblems}</Li>
 </List>
 
 <Heading

src/routes/typography/list/+page.svelte

@@ -210,23 +210,23 @@
     class="mb-8 space-y-4 text-gray-500 dark:text-gray-400"
     list="none"
   >
-    <Li icon liClass="gap-3">
+    <Li icon class="gap-3">
       <CheckOutline class="h-3.5 w-3.5 text-green-500 dark:text-green-400" />
       Individual configuration
     </Li>
-    <Li icon liClass="gap-3">
+    <Li icon class="gap-3">
       <CheckOutline class="h-3.5 w-3.5 text-green-500 dark:text-green-400" />
       No setup, or hidden fees
     </Li>
-    <Li icon liClass="gap-3">
+    <Li icon class="gap-3">
       <CheckOutline class="h-3.5 w-3.5 text-green-500 dark:text-green-400" />
       <span>Team size: <Span>1 developer</Span></span>
     </Li>
-    <Li icon liClass="gap-3">
+    <Li icon class="gap-3">
       <CheckOutline class="h-3.5 w-3.5 text-green-500 dark:text-green-400" />
       <span>Premium support: <Span>6 months</Span></span>
     </Li>
-    <Li icon liClass="gap-3">
+    <Li icon class="gap-3">
       <CheckOutline class="h-3.5 w-3.5 text-green-500 dark:text-green-400" />
       <span>Free updates: <Span>6 months</Span></span>
     </Li>
@@ -242,7 +242,7 @@
     list="none"
     class="max-w-md divide-y divide-gray-200 dark:divide-gray-700"
   >
-    <Li liClass="pb-3 sm:pb-4">
+    <Li class="pb-3 sm:pb-4">
       <div class="flex items-center space-x-4 rtl:space-x-reverse">
         <div class="flex-shrink-0">
           <img
@@ -266,7 +266,7 @@
         </div>
       </div>
     </Li>
-    <Li liClass="py-3 sm:py-4">
+    <Li class="py-3 sm:py-4">
       <div class="flex items-center space-x-4 rtl:space-x-reverse">
         <div class="flex-shrink-0">
           <img
@@ -290,7 +290,7 @@
         </div>
       </div>
     </Li>
-    <Li liClass="py-3 sm:py-4">
+    <Li class="py-3 sm:py-4">
       <div class="flex items-center space-x-4 rtl:space-x-reverse">
         <div class="flex-shrink-0">
           <img
@@ -314,7 +314,7 @@
         </div>
       </div>
     </Li>
-    <Li liClass="py-3 sm:py-4">
+    <Li class="py-3 sm:py-4">
       <div class="flex items-center space-x-4 rtl:space-x-reverse">
         <div class="flex-shrink-0">
           <img
@@ -338,7 +338,7 @@
         </div>
       </div>
     </Li>
-    <Li liClass="py-3 sm:py-4">
+    <Li class="py-3 sm:py-4">
       <div class="flex items-center space-x-4 rtl:space-x-reverse">
         <div class="flex-shrink-0">
           <img