diff --git a/apps/app/src/app/pages/(components)/components/(field)/field--checkbox.preview.ts b/apps/app/src/app/pages/(components)/components/(field)/field--checkbox.preview.ts
index 7b50fdddc..c3bd294df 100644
--- a/apps/app/src/app/pages/(components)/components/(field)/field--checkbox.preview.ts
+++ b/apps/app/src/app/pages/(components)/components/(field)/field--checkbox.preview.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { HlmCheckbox } from '@spartan-ng/helm/checkbox';
+import { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';
 import { HlmFieldImports } from '@spartan-ng/helm/field';
 
 @Component({
 	selector: 'spartan-field-checkbox-preview',
-	imports: [HlmFieldImports, HlmCheckbox],
+	imports: [HlmFieldImports, HlmCheckboxImports],
 	host: {
 		class: 'w-full max-w-md',
 	},
diff --git a/apps/app/src/app/pages/(components)/components/(field)/field--group.preview.ts b/apps/app/src/app/pages/(components)/components/(field)/field--group.preview.ts
index fd2f0ad8a..f2dcb61fb 100644
--- a/apps/app/src/app/pages/(components)/components/(field)/field--group.preview.ts
+++ b/apps/app/src/app/pages/(components)/components/(field)/field--group.preview.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { HlmCheckbox } from '@spartan-ng/helm/checkbox';
+import { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';
 import { HlmFieldImports } from '@spartan-ng/helm/field';
 
 @Component({
 	selector: 'spartan-field-group-preview',
-	imports: [HlmFieldImports, HlmCheckbox],
+	imports: [HlmFieldImports, HlmCheckboxImports],
 	host: {
 		class: 'w-full max-w-md',
 	},
diff --git a/apps/app/src/app/pages/(components)/components/(field)/field--input.preview.ts b/apps/app/src/app/pages/(components)/components/(field)/field--input.preview.ts
index 973df22b6..c04230817 100644
--- a/apps/app/src/app/pages/(components)/components/(field)/field--input.preview.ts
+++ b/apps/app/src/app/pages/(components)/components/(field)/field--input.preview.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { HlmField, HlmFieldDescription, HlmFieldGroup, HlmFieldLabel, HlmFieldSet } from '@spartan-ng/helm/field';
-import { HlmInput } from '@spartan-ng/helm/input';
+import { HlmFieldImports } from '@spartan-ng/helm/field';
+import { HlmInputImports } from '@spartan-ng/helm/input';
 
 @Component({
 	selector: 'spartan-field-input-preview',
-	imports: [HlmFieldSet, HlmFieldGroup, HlmField, HlmFieldLabel, HlmFieldDescription, HlmInput],
+	imports: [HlmFieldImports, HlmInputImports],
 	host: {
 		class: 'w-full max-w-md',
 	},
diff --git a/apps/app/src/app/pages/(components)/components/(field)/field--responsive-layout.preview.ts b/apps/app/src/app/pages/(components)/components/(field)/field--responsive-layout.preview.ts
index 158aff550..5e70256c0 100644
--- a/apps/app/src/app/pages/(components)/components/(field)/field--responsive-layout.preview.ts
+++ b/apps/app/src/app/pages/(components)/components/(field)/field--responsive-layout.preview.ts
@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
-import { HlmButton } from '@spartan-ng/helm/button';
+import { HlmButtonImports } from '@spartan-ng/helm/button';
 import { HlmFieldImports } from '@spartan-ng/helm/field';
-import { HlmInput } from '@spartan-ng/helm/input';
-import { HlmTextarea } from '@spartan-ng/helm/textarea';
+import { HlmInputImports } from '@spartan-ng/helm/input';
+import { HlmTextareaImports } from '@spartan-ng/helm/textarea';
 
 @Component({
 	selector: 'spartan-field-responsive-layout-preview',
-	imports: [HlmFieldImports, HlmInput, HlmTextarea, HlmButton],
+	imports: [HlmFieldImports, HlmInputImports, HlmTextareaImports, HlmButtonImports],
 	host: {
 		class: 'w-full max-w-4xl',
 	},
diff --git a/apps/app/src/app/pages/(components)/components/(field)/field--select.preview.ts b/apps/app/src/app/pages/(components)/components/(field)/field--select.preview.ts
index 9dbe6d757..f2bdfbcc3 100644
--- a/apps/app/src/app/pages/(components)/components/(field)/field--select.preview.ts
+++ b/apps/app/src/app/pages/(components)/components/(field)/field--select.preview.ts
@@ -1,19 +1,11 @@
 import { Component } from '@angular/core';
 import { BrnSelectImports } from '@spartan-ng/brain/select';
-import { HlmField, HlmFieldDescription, HlmFieldGroup, HlmFieldLabel, HlmFieldSet } from '@spartan-ng/helm/field';
+import { HlmFieldImports } from '@spartan-ng/helm/field';
 import { HlmSelectImports } from '@spartan-ng/helm/select';
 
 @Component({
 	selector: 'spartan-field-select-preview',
-	imports: [
-		HlmFieldSet,
-		HlmFieldGroup,
-		HlmField,
-		HlmFieldLabel,
-		HlmFieldDescription,
-		BrnSelectImports,
-		HlmSelectImports,
-	],
+	imports: [HlmFieldImports, BrnSelectImports, HlmSelectImports],
 	host: {
 		class: 'w-full max-w-md',
 	},
diff --git a/apps/app/src/app/pages/(components)/components/(field)/field--set.preview.ts b/apps/app/src/app/pages/(components)/components/(field)/field--set.preview.ts
index 07eb4c9a5..f3c8c7ff4 100644
--- a/apps/app/src/app/pages/(components)/components/(field)/field--set.preview.ts
+++ b/apps/app/src/app/pages/(components)/components/(field)/field--set.preview.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { HlmField, HlmFieldDescription, HlmFieldGroup, HlmFieldLabel, HlmFieldSet } from '@spartan-ng/helm/field';
-import { HlmInput } from '@spartan-ng/helm/input';
+import { HlmFieldImports } from '@spartan-ng/helm/field';
+import { HlmInputImports } from '@spartan-ng/helm/input';
 
 @Component({
 	selector: 'spartan-field-set-preview',
-	imports: [HlmFieldSet, HlmFieldGroup, HlmField, HlmFieldLabel, HlmFieldDescription, HlmInput],
+	imports: [HlmFieldImports, HlmInputImports],
 	host: {
 		class: 'w-full max-w-md space-y-6',
 	},
diff --git a/apps/app/src/app/pages/(components)/components/(field)/field--slider.preview.ts b/apps/app/src/app/pages/(components)/components/(field)/field--slider.preview.ts
index e2fa5706c..adc405071 100644
--- a/apps/app/src/app/pages/(components)/components/(field)/field--slider.preview.ts
+++ b/apps/app/src/app/pages/(components)/components/(field)/field--slider.preview.ts
@@ -12,7 +12,7 @@ import { HlmSliderImports } from '@spartan-ng/helm/slider';
 		<fieldset hlmFieldSet>
 			<div hlmFieldGroup>
 				<div hlmField>
-					<label hlmFieldLabel for="field-input-preview-firstname">Username</label>
+					<label hlmFieldLabel for="field-input-preview-firstname">Price Range</label>
 					<p hlmFieldDescription>Set your budget range ($0 - {{ value() }}).</p>
 					<hlm-slider [max]="1000" [step]="10" [(value)]="value" />
 				</div>
diff --git a/apps/app/src/app/pages/(components)/components/(field)/field--switch.preview.ts b/apps/app/src/app/pages/(components)/components/(field)/field--switch.preview.ts
index b11e66a3c..8b927d9b8 100644
--- a/apps/app/src/app/pages/(components)/components/(field)/field--switch.preview.ts
+++ b/apps/app/src/app/pages/(components)/components/(field)/field--switch.preview.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 import { HlmFieldImports } from '@spartan-ng/helm/field';
-import { HlmSwitch } from '@spartan-ng/helm/switch';
+import { HlmSwitchImports } from '@spartan-ng/helm/switch';
 
 @Component({
 	selector: 'spartan-field-switch-preview',
-	imports: [HlmFieldImports, HlmSwitch],
+	imports: [HlmFieldImports, HlmSwitchImports],
 	host: {
 		class: 'w-full max-w-md',
 	},
diff --git a/apps/app/src/app/pages/(components)/components/(field)/field--textarea.preview.ts b/apps/app/src/app/pages/(components)/components/(field)/field--textarea.preview.ts
index 0c691a1a3..00fcb3439 100644
--- a/apps/app/src/app/pages/(components)/components/(field)/field--textarea.preview.ts
+++ b/apps/app/src/app/pages/(components)/components/(field)/field--textarea.preview.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { HlmField, HlmFieldDescription, HlmFieldGroup, HlmFieldLabel, HlmFieldSet } from '@spartan-ng/helm/field';
-import { HlmTextarea } from '@spartan-ng/helm/textarea';
+import { HlmFieldImports } from '@spartan-ng/helm/field';
+import { HlmTextareaImports } from '@spartan-ng/helm/textarea';
 
 @Component({
 	selector: 'spartan-field-textarea-preview',
-	imports: [HlmFieldSet, HlmFieldGroup, HlmField, HlmFieldLabel, HlmFieldDescription, HlmTextarea],
+	imports: [HlmFieldImports, HlmTextareaImports],
 	host: {
 		class: 'w-full max-w-md',
 	},
diff --git a/apps/app/src/app/pages/(components)/components/(field)/field.preview.ts b/apps/app/src/app/pages/(components)/components/(field)/field.preview.ts
index 4c5685714..c8bf98857 100644
--- a/apps/app/src/app/pages/(components)/components/(field)/field.preview.ts
+++ b/apps/app/src/app/pages/(components)/components/(field)/field.preview.ts
@@ -1,19 +1,19 @@
 import { Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BrnSelectImports } from '@spartan-ng/brain/select';
-import { HlmButton } from '@spartan-ng/helm/button';
-import { HlmCheckbox } from '@spartan-ng/helm/checkbox';
+import { HlmButtonImports } from '@spartan-ng/helm/button';
+import { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';
 import { HlmFieldImports } from '@spartan-ng/helm/field';
 import { HlmInputImports } from '@spartan-ng/helm/input';
 import { HlmSelectImports } from '@spartan-ng/helm/select';
-import { HlmTextarea } from '@spartan-ng/helm/textarea';
+import { HlmTextareaImports } from '@spartan-ng/helm/textarea';
 
 @Component({
 	selector: 'spartan-field-preview',
 	imports: [
-		HlmCheckbox,
-		HlmTextarea,
-		HlmButton,
+		HlmCheckboxImports,
+		HlmTextareaImports,
+		HlmButtonImports,
 		HlmInputImports,
 		HlmFieldImports,
 		BrnSelectImports,
@@ -38,7 +38,7 @@ import { HlmTextarea } from '@spartan-ng/helm/textarea';
 						<div hlmField class="col-span-2">
 							<label hlmFieldLabel for="field-preview-card-number">Card number</label>
 							<input hlmInput placeholder="1234 1234 1234 1234" id="field-preview-card-number" />
-							<p hlmFieldDescription>Enter your 16-digit card number without spaces or dashes.</p>
+							<p hlmFieldDescription>Enter your 16-digit card number</p>
 						</div>
 						<div class="grid grid-cols-3 gap-4">
 							<div hlmField>
diff --git a/libs/helm/field/src/lib/hlm-field-content.ts b/libs/helm/field/src/lib/hlm-field-content.ts
index 08d1c808a..a09f9f092 100644
--- a/libs/helm/field/src/lib/hlm-field-content.ts
+++ b/libs/helm/field/src/lib/hlm-field-content.ts
@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmFieldContent],hlm-field-content',
diff --git a/libs/helm/field/src/lib/hlm-field-description.ts b/libs/helm/field/src/lib/hlm-field-description.ts
index 42c719416..8aa1cc782 100644
--- a/libs/helm/field/src/lib/hlm-field-description.ts
+++ b/libs/helm/field/src/lib/hlm-field-description.ts
@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmFieldDescription],hlm-field-description',
diff --git a/libs/helm/field/src/lib/hlm-field-error.ts b/libs/helm/field/src/lib/hlm-field-error.ts
index 45719542c..a263d7d89 100644
--- a/libs/helm/field/src/lib/hlm-field-error.ts
+++ b/libs/helm/field/src/lib/hlm-field-error.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-field-error',
diff --git a/libs/helm/field/src/lib/hlm-field-group.ts b/libs/helm/field/src/lib/hlm-field-group.ts
index 4c989bf39..1d11f91c3 100644
--- a/libs/helm/field/src/lib/hlm-field-group.ts
+++ b/libs/helm/field/src/lib/hlm-field-group.ts
@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmFieldGroup],hlm-field-group',
diff --git a/libs/helm/field/src/lib/hlm-field-label.ts b/libs/helm/field/src/lib/hlm-field-label.ts
index 15c0d4577..6a54a6e9b 100644
--- a/libs/helm/field/src/lib/hlm-field-label.ts
+++ b/libs/helm/field/src/lib/hlm-field-label.ts
@@ -1,10 +1,10 @@
 import { computed, Directive, input } from '@angular/core';
 import { HlmLabel } from '@spartan-ng/helm/label';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: '[hlmFieldLabel]',
+	selector: '[hlmFieldLabel],hlm-field-label',
 	hostDirectives: [HlmLabel],
 	host: {
 		'data-slot': 'field-label',
diff --git a/libs/helm/field/src/lib/hlm-field-legend.ts b/libs/helm/field/src/lib/hlm-field-legend.ts
index a34f4c3b3..26fa6b9b1 100644
--- a/libs/helm/field/src/lib/hlm-field-legend.ts
+++ b/libs/helm/field/src/lib/hlm-field-legend.ts
@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'legend[hlmFieldLegend]',
diff --git a/libs/helm/field/src/lib/hlm-field-separator.ts b/libs/helm/field/src/lib/hlm-field-separator.ts
index c2a6b3e06..339adc9ea 100644
--- a/libs/helm/field/src/lib/hlm-field-separator.ts
+++ b/libs/helm/field/src/lib/hlm-field-separator.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { HlmSeparator } from '@spartan-ng/helm/separator';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-field-separator',
diff --git a/libs/helm/field/src/lib/hlm-field-set.ts b/libs/helm/field/src/lib/hlm-field-set.ts
index b2357854d..dcc992e8b 100644
--- a/libs/helm/field/src/lib/hlm-field-set.ts
+++ b/libs/helm/field/src/lib/hlm-field-set.ts
@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'fieldset[hlmFieldSet]',
@@ -14,7 +14,8 @@ export class HlmFieldSet {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+			'flex flex-col gap-6',
+			'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
 			this.userClass(),
 		),
 	);
diff --git a/libs/helm/field/src/lib/hlm-field.ts b/libs/helm/field/src/lib/hlm-field.ts
index dd292805e..a1502a2e6 100644
--- a/libs/helm/field/src/lib/hlm-field.ts
+++ b/libs/helm/field/src/lib/hlm-field.ts
@@ -1,7 +1,7 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { cva, VariantProps } from 'class-variance-authority';
-import { ClassValue } from 'clsx';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
 
 const fieldVariants = cva('group/field data-[invalid=true]:text-destructive flex w-full gap-3', {
 	variants: {
diff --git a/libs/tools/src/executors/docs/generate-ui-docs/__snapshots__/executor.spec.ts.snap b/libs/tools/src/executors/docs/generate-ui-docs/__snapshots__/executor.spec.ts.snap
index bb84b4a6e..416ac9ba3 100644
--- a/libs/tools/src/executors/docs/generate-ui-docs/__snapshots__/executor.spec.ts.snap
+++ b/libs/tools/src/executors/docs/generate-ui-docs/__snapshots__/executor.spec.ts.snap
@@ -2809,7 +2809,7 @@ exports[`generate-ui-docs executor produces stable output 1`] = `
         ],
         "models": [],
         "outputs": [],
-        "selector": "[hlmFieldLabel]",
+        "selector": "[hlmFieldLabel],hlm-field-label",
       },
       "HlmFieldLegend": {
         "inputs": [