docs: cleanups (#1847)

Author: huntabyte

docs/content/components/accordion.md

@@ -274,7 +274,7 @@ Disable specific items with the `disabled` prop:
 
 The `hiddenUntilFound` prop enables browser search functionality within collapsed accordion content. When enabled, collapsed content is marked with `hidden="until-found"`, allowing browsers to automatically expand accordion items when users search for text within them.
 
-```svelte {4}
+```svelte {6}
 <Accordion.Root type="single">
   <Accordion.Item value="item-1">
     <Accordion.Header>

docs/content/components/avatar.md

@@ -134,7 +134,7 @@ When you're confident that an image will load (such as local assets), you can by
 
 This example demonstrates how to create a clickable avatar composed with a [Link Preview](/docs/components/link-preview):
 
-<ComponentPreview name="avatar-demo-link-preview" componentName="Avatar with Link Preview">
+<ComponentPreview name="avatar-demo-link-preview" componentName="Avatar with Link Preview" size="sm">
 
 {#snippet preview()}
 <AvatarDemoLinkPreview />

docs/content/components/radio-group.md

@@ -194,7 +194,7 @@ When the `orientation` is set to `'vertical'`, the radio group will navigate thr
 
 When a radio group is readonly, users can focus and navigate through the items but cannot change the selection. This is useful for displaying information that should be visible but not editable.
 
-<ComponentPreview name="radio-group-demo-readonly" componentName="Radio Group Readonly">
+<ComponentPreview name="radio-group-demo-readonly" componentName="Radio Group Readonly" size="xs">
 
 {#snippet preview()}
 <RadioGroupDemoReadonly />
@@ -212,7 +212,7 @@ When a radio group is readonly, users can focus and navigate through the items b
 
 When a radio group is disabled, users cannot interact with it at all. The entire group becomes non-focusable and non-interactive.
 
-<ComponentPreview name="radio-group-demo-disabled" componentName="Radio Group Disabled">
+<ComponentPreview name="radio-group-demo-disabled" componentName="Radio Group Disabled" size="xs">
 
 {#snippet preview()}
 <RadioGroupDemoDisabled />

docs/src/lib/components/demos/checkbox-demo-custom.svelte

@@ -22,7 +22,7 @@
 			bind:checked
 			{id}
 			aria-labelledby="terms-label"
-			class="border-muted bg-foreground data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40 data-disabled:cursor-not-allowed data-disabled:opacity-70 peer inline-flex size-[25px] items-center justify-center rounded-md border transition-all duration-150 ease-in-out active:scale-[0.98]"
+			class="border-muted bg-foreground data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40 data-disabled:cursor-not-allowed data-disabled:opacity-70 data-disabled:pointer-events-none  peer inline-flex size-[25px] items-center justify-center rounded-md border transition-all duration-150 ease-in-out active:scale-[0.98]"
 			name="hello"
 			{...restProps}
 		>
@@ -39,7 +39,7 @@
 		<Label.Root
 			id="terms-label"
 			for={id}
-			class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+			class="text-sm font-medium leading-none peer-disabled:pointer-events-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 		>
 			{labelText}
 		</Label.Root>

docs/src/lib/components/demos/radio-group-demo-disabled.svelte

@@ -11,23 +11,23 @@
 		<RadioGroup.Item
 			id="disabled-amazing"
 			value="amazing"
-			class="border-border-input bg-background hover:border-dark-40 data-[state=checked]:border-foreground data-[state=checked]:border-6 size-5 shrink-0 cursor-default rounded-full border transition-all duration-100 ease-in-out"
+			class="border-border-input bg-background hover:border-dark-40 data-[state=checked]:border-foreground data-[state=checked]:border-6 data-disabled:pointer-events-none size-5 shrink-0 cursor-default rounded-full border transition-all duration-100 ease-in-out"
 		/>
 		<Label.Root for="disabled-amazing" class="pl-3">Amazing</Label.Root>
 	</div>
 	<div class="text-foreground group flex select-none items-center transition-all">
 		<RadioGroup.Item
 			id="disabled-average"
 			value="average"
-			class="border-border-input bg-background hover:border-dark-40 data-[state=checked]:border-foreground data-[state=checked]:border-6 size-5 shrink-0 cursor-default rounded-full border transition-all duration-100 ease-in-out"
+			class="border-border-input bg-background hover:border-dark-40 data-[state=checked]:border-foreground data-[state=checked]:border-6 data-disabled:pointer-events-none size-5 shrink-0 cursor-default rounded-full border transition-all duration-100 ease-in-out"
 		/>
 		<Label.Root for="disabled-average" class="pl-3">Average</Label.Root>
 	</div>
 	<div class="text-foreground group flex select-none items-center transition-all">
 		<RadioGroup.Item
 			id="disabled-terrible"
 			value="terrible"
-			class="border-border-input bg-background hover:border-dark-40 data-[state=checked]:border-foreground data-[state=checked]:border-6 size-5 shrink-0 cursor-default rounded-full border transition-all duration-100 ease-in-out"
+			class="border-border-input bg-background hover:border-dark-40 data-[state=checked]:border-foreground data-[state=checked]:border-6 data-disabled:pointer-events-none size-5 shrink-0 cursor-default rounded-full border transition-all duration-100 ease-in-out"
 		/>
 		<Label.Root for="disabled-terrible" class="pl-3">Terrible</Label.Root>
 	</div>

docs/src/lib/components/demos/radio-group-demo-readonly.svelte

@@ -11,23 +11,23 @@
 		<RadioGroup.Item
 			id="readonly-amazing"
 			value="amazing"
-			class="border-border-input bg-background hover:border-dark-40 data-[state=checked]:border-foreground data-[state=checked]:border-6 size-5 shrink-0 cursor-default rounded-full border transition-all duration-100 ease-in-out"
+			class="border-border-input bg-background hover:border-dark-40 data-[state=checked]:border-foreground data-[state=checked]:border-6 data-readonly:pointer-events-none size-5 shrink-0 cursor-default rounded-full border transition-all duration-100 ease-in-out"
 		/>
 		<Label.Root for="readonly-amazing" class="pl-3">Amazing</Label.Root>
 	</div>
 	<div class="text-foreground group flex select-none items-center transition-all">
 		<RadioGroup.Item
 			id="readonly-average"
 			value="average"
-			class="border-border-input bg-background hover:border-dark-40 data-[state=checked]:border-foreground data-[state=checked]:border-6 size-5 shrink-0 cursor-default rounded-full border transition-all duration-100 ease-in-out"
+			class="border-border-input bg-background hover:border-dark-40 data-[state=checked]:border-foreground data-[state=checked]:border-6 data-readonly:pointer-events-none size-5 shrink-0 cursor-default rounded-full border transition-all duration-100 ease-in-out"
 		/>
 		<Label.Root for="readonly-average" class="pl-3">Average</Label.Root>
 	</div>
 	<div class="text-foreground group flex select-none items-center transition-all">
 		<RadioGroup.Item
 			id="readonly-terrible"
 			value="terrible"
-			class="border-border-input bg-background hover:border-dark-40 data-[state=checked]:border-foreground data-[state=checked]:border-6 size-5 shrink-0 cursor-default rounded-full border transition-all duration-100 ease-in-out"
+			class="border-border-input bg-background hover:border-dark-40 data-[state=checked]:border-foreground data-[state=checked]:border-6 data-readonly:pointer-events-none size-5 shrink-0 cursor-default rounded-full border transition-all duration-100 ease-in-out"
 		/>
 		<Label.Root for="readonly-terrible" class="pl-3">Terrible</Label.Root>
 	</div>