chore: fix hrefs and add missing accessibility attributes

The changes improve internal link paths and accessibility by:
- Updating badge href paths to use absolute format
- Adding ID attribute for page navigation
- Adding proper aria-disabled attribute to Note component

Author: kampsy

src/docs/data/badge.ts

@@ -155,13 +155,13 @@ import { LogoSlackColor } from 'kampsy-ui/icons';
 
 <div class="flex flex-col gap-4">
   <div class="flex items-center gap-2 capitalize">
-	  <Badge href="#badge#pill" size="small" variant="pill" aria-label="large pill">label</Badge>
-	  <Badge href="#badge#pill" size="medium" variant="pill" aria-label="medium pill">label</Badge>
-	  <Badge href="#badge#pill" size="large" variant="pill" aria-label="small pill">label</Badge>
+	  <Badge href="/badge#pill" size="small" variant="pill" aria-label="large pill">label</Badge>
+	  <Badge href="/badge#pill" size="medium" variant="pill" aria-label="medium pill">label</Badge>
+	  <Badge href="/badge#pill" size="large" variant="pill" aria-label="small pill">label</Badge>
   </div>
   <div class="flex items-center gap-2 capitalize">
-	  <Badge href="#badge#pill" icon={LogoSlackColor} size="small" variant="pill" aria-label="icon large pill">label</Badge>
-	  <Badge href="#badge#pill" icon={LogoSlackColor} size="medium" variant="pill" aria-label="icon medium pill">label</Badge>
-	  <Badge href="#badge#pill" icon={LogoSlackColor} size="large" variant="pill" aria-label="icon small pill">label</Badge>
+	  <Badge href="/badge#pill" icon={LogoSlackColor} size="small" variant="pill" aria-label="icon large pill">label</Badge>
+	  <Badge href="/badge#pill" icon={LogoSlackColor} size="medium" variant="pill" aria-label="icon medium pill">label</Badge>
+	  <Badge href="/badge#pill" icon={LogoSlackColor} size="large" variant="pill" aria-label="icon small pill">label</Badge>
   </div>
 </div>`;

src/docs/ui/linkH2.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
 	import Link from '$lib/icons/link.svelte';
 
-	interface Props extends HTMLAttributes<HTMLAnchorElement> {
+	interface Props extends HTMLAnchorAttributes {
 		href: string;
 		children: Snippet;
 	}
 
 	let { href, children, ...rest }: Props = $props();
+
+	// id for page navigation
+	const id = href.split('#').pop();
 </script>
 
-<a {href} class="no-underline outline-none relative -ml-5 pl-5 inline-block group" {...rest}>
+<a {href} {id} class="no-underline outline-none relative -ml-5 pl-5 inline-block group" {...rest}>
 	<h2
 		class="first-letter:capitalize text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 text-[24px] font-semibold leading-[32px] tracking-[-0.96px]"
 	>

src/lib/note/note.svelte

@@ -135,7 +135,8 @@
 <div class="w-full">
 	<div
 		class="w-full space-y-2 md:space-y-0 md:flex md:items-center md:justify-between lg:gap-x-3
-		{disabled}
+		class:disabled={disabled}
+		aria-disabled={disabled}
 		{contClass} {radiusClass} {sizeClass} {klass}"
 		{...rest}
 	>

src/routes/badge/+page.svelte

@@ -428,33 +428,33 @@
 			{#snippet demo()}
 				<div class="flex flex-col gap-4">
 					<div class="flex items-center gap-2 capitalize">
-						<Badge href="#badge#pill" size="small" variant="pill" aria-label="large pill"
+						<Badge href="/badge#pill" size="small" variant="pill" aria-label="large pill"
 							>label</Badge
 						>
-						<Badge href="#badge#pill" size="medium" variant="pill" aria-label="medium pill"
+						<Badge href="/badge#pill" size="medium" variant="pill" aria-label="medium pill"
 							>label</Badge
 						>
-						<Badge href="#badge#pill" size="large" variant="pill" aria-label="small pill"
+						<Badge href="/badge#pill" size="large" variant="pill" aria-label="small pill"
 							>label</Badge
 						>
 					</div>
 					<div class="flex items-center gap-2 capitalize">
 						<Badge
-							href="#badge#pill"
+							href="/badge#pill"
 							icon={LogoSlackColor}
 							size="small"
 							variant="pill"
 							aria-label="icon large pill">label</Badge
 						>
 						<Badge
-							href="#badge#pill"
+							href="/badge#pill"
 							icon={LogoSlackColor}
 							size="medium"
 							variant="pill"
 							aria-label="icon medium pill">label</Badge
 						>
 						<Badge
-							href="#badge#pill"
+							href="/badge#pill"
 							icon={LogoSlackColor}
 							size="large"
 							variant="pill"